better-scroll滚动无效几种原因

短命女 2023-10-11 15:14 75阅读 0赞

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

可以下载官方案例学习。

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

#### 一、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>`

审查元素可以看到：

![20180224143212340][]

这样即添加成功的

#### 三、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就可以看到打印结果：

![20180224143918144][]

以上就是可以滚动的情况，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

[20180224143212340]: https://img-blog.csdn.net/20180224143212340
[20180224143918144]: https://img-blog.csdn.net/20180224143918144