从源码角度解读BetterScroll中maxScrollY的含义

最近在看一个Vue3 Typescript项目，里面有段BetterScroll代码。

 if (scroll.value && scroll.value.maxScrollY >= -1) {

        state.manualLoading = true

        await searchMore()

        state.manualLoading = false

      }

 对这个maxScrollY的含义不太明白，官网的解释也说的不清楚，说的等于是废话，以下是官网解释。

 看的出来根本没有说清楚。

所以干脆直接看源码：

首先定位到下面这段：

 看的出来，关键是wrapperHeight和indicatorHeight

wrapperHeight应该是父级容器高度，那么又是什么？

接着跟进indicatorHeight：

indicatorHeight从getRect函数解构出来。

所以继续跟进getRect函数：

对于这个getBoundingClientRect，其实不必大惊小怪，这个其实是相对于浏览器窗口的一个dom对象，这里关键看它的height属性。

getBoundingClientRect的heigh属性是包含了原有dom元素的height + padding + borderwidth.

见官网图：

 那么前面的 this.maxScrollY = wrapperHeight - indicatorHeight

就好理解了。 maxScrollY相当于：父容器高度 - 内容元素的高度

maxScrollY的意义就是父容器内部减去内容高度后的剩余空间

此剩余空间如果为整数或者接近于0，说明父容器能装的下内容高度，此时无法进行滚动。

如果此剩余空间始终为负数，说明内容高度大于父容器高度，此时可以进行滚动。

这就是maxScrollY的全部意义！