better-scroll无法滚动的问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/OHRadiance/article/details/78509542

总结一下目前为止碰到的better-scroll无法滚动的问题。

遇见better-scroll(以下简称：BS)无法滚动，可从两方面去考虑。
一是层级关系出错，二是计算高度出错。

1，层级关系

BS的基本结构是：一个wrapper层，一个content层。wrapper层是整个滚动页面占据的显示空间。content层则包含了全部的页面内容。

<div class="wrapper">
  <div class="content">
    content...
  </div>
</div>

new BS('wrapper');

简单点说，就是：wrapper站住位置，content在wrapper里面滚动。
自然，创建BS对象的时候传入的dom也该是wrapper。同时，wrapper里面不能存在多级div，也就是说，所有内容都需要被包含在一个content中。

检测此部分是否正确，只需要打开检查工具，查看content上是否被附加了一些用于滚动的额外的style。

style="pointer-events: auto; transition-property: transform; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);"

2，页面高度计算

当层级关系检查无误但还是无法滚动，则建议打印BS对象查看一下。
关注两个变量：hasVerticalScroll和scrollerHeight。

如果hasVerticalScroll为false，则一定时wrapper和content计算高度时出错了。此时，对比下scrollerHeight和wrapperHeight，多半是前者小于等于后者。然后，手动修改hasVerticalScroll为true，会发现可以拖拽，但不是滚动。这是因为scrollerHeight计算错误。这就需要根据具体情况去查找原因了。

高度计算出错多半是因为dom没更新完就初始化BS。(BS必须在dom完成之后被初始化)

因此，注意所以影响dom高度变化的因素。包括：dom依赖绑定数据更新时，注意数据的传入。图片加载时，先把位置站好，不然也会导致出错。

3，当前遗留问题

BS初始化一切正常，但是底部有一小块无法显示。
可以肯定不是DOM初始化的问题，因为试过加入定时器延迟执行也无效。
而且scrollerHeight与content实际高度只差不到1px。
很奇怪！