vue使用better-scroll不能滚动的原因

什么是 better-scroll

better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。

better-scroll 的滚动原理

不少同学可能用过 better-scroll，我收到反馈最多的问题是：

我的 better-scroll 初始化了， 但是没法滚动。

不能滚动是现象，我们得搞清楚这其中的根本原因。在这之前，我们先来看一下浏览器的滚动原理：
浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。

那么对于 better-scroll 也是一样的道理，我们先来看一下 better-scroll 常见的 html 结构：

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

绿色部分为 wrapper，也就是父容器，它会有固定的高度。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。

那么，我们怎么初始化 better-scroll 呢，如果是上述 html 结构，那么初始化代码如下：

import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper, {})

我们经常遇到better-scroll不能滚动，我们可以打印一下实例看下

以上就是可以滚动的情况，wrapperHeight(616) < scrollHeight(750)，hasVerticalScroll为true；

那如果这些数据不对，检查是否dom没有更新完就初始化BScroll了，要等dom更新完才能初始化

还有一种情况是里面的容器和外面的wrapper的容器高度一致，导致不能滚动，解决办法，使用定位来解决

解决方案: 利用绝对定位;top的值为0,bottom的值也为0 即可让里层div的高度与外层的高度一样

https://zhuanlan.zhihu.com/p/27407024这是better-scroll的作者在知乎上面发表的一篇关于better-scroll的文章，解释的非常清楚