better-scroll滚动无效 几种原因

首先附上better-scrooll的github地址：github.com/ustbhuangyi…

可以下载官方案例学习。

本人也会将better-scroll小案例上传自己github，附上本人使用better-scroll制作页面的github地址：github.com/seven77Zhou…

一、DOM层级关系

1. <div class="wrapper">
2. <div class="content">
3. content...
4. </div>
5. </div>

wrapper里面不能存在多个同级div，如果你这样写：

1. <div class="classifyTitle" ref="wrapper">
2.     <div class="">
3. ss
4.     </div>
5.     <ul>
6. <li v-for="(item,index) in classifyData.products">
7.     <router-link :to="{name:'详情'}">{{item.title}}</router-link>
8. </li>
9.     </ul>
10. </div>

那么ul中的元素将不能滚动

二、content是否被成功添加滚动相关style

以此dom结构为例：

1. <div class="classifyTitle" ref="wrapper">
2. <ul>
3.     <li v-for="(item,index) in classifyData.products">
4. <router-link :to="{name:'详情'}">{{item.title}}</router-link>
5.     </li>
6. </ul>
7. </div>

审查元素可以看到：

这样即添加成功的

三、wrapper 与 content 高度问题

只有content的高度大于wrapper高度时候，才可以滚动。

如何看？

1. this.$nextTick(() => {
2.     if (!this.scroll) {
3. this.scroll = new BScroll(this.$refs.wrapper, {})
4. console.log(this.scroll)
5.     }
6. })

F12就可以看到打印结果：

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

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

四、wrapper样式

.wrapper元素上要给定位

1. position: absolute;
2. left: 0;
3. top: 0;
4. overflow: hidden

或者

position: relative