当前位置:首页 > 编程笔记 > 正文
已解决

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

来自网友在路上 147847提问 提问时间:2023-11-06 11:45:02阅读次数: 47

最佳答案 问答题库478位专家为你答疑解惑

最近在看一个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的全部意义!

查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"从源码角度解读BetterScroll中maxScrollY的含义":http://eshow365.cn/6-33590-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!