中文文档地址:https://better-scroll.github.io/docs/zh-CN/guide/
插件文档地址:https://better-scroll.github.io/docs/zh-CN/plugins/#%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E6%9C%89%E6%8F%92%E4%BB%B6
移动端滑动问题常见于iOS设备,可以先尝试通过增加css(例如:-webkit-overflow-scrolling: touch;)等方式来解决不行的话再使用插件来实际滚动。
初始化
// DOM
<div class="wrapper">
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
<!-- 这里可以放一些其它的 DOM,但不会影响滚动 -->
</div>
// js
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)
上面的代码中 BetterScroll 是作用在外层 wrapper 容器上的,滚动的部分是 content 元素。这里要注意的是,BetterScroll 默认处理容器(wrapper)的第一个子元素(content)的滚动,其它的元素都会被忽略。
core.js为不带插件的核心版本,初始化方式 new BScroll(wrapper)
better-scroll 为全插件版本,初始化方式BetterScroll.createBScroll('.wrapper', {})
需要监听各种事件
默认屏蔽各类事件,需要自行手动,例如:
scrollBox2 = BetterScroll.createBScroll('#ele', {
click: true, // 点击事件
probeType: 3 // 是否派发scroll事件,值有 0|1|2|3 这几种,具体说明请查阅文档。
});
需要滚动条的话
如需显示滚动条的话,引入全插件版本之后,使用如下初始化即可
scrollBox2 = BetterScroll.createBScroll('#ele', {
click: true, //
scrollbar: { // 开启滚动条显示
fade: false //关闭滚动条自动隐藏
}
});
// XXX 滚动条使用的是绝对定位,所以#ele需要设置`position: relative;
滚动没生效的常见情况
- 初始化之后元素的高度变化了
- 子元素使用了ajax生成,在生成完毕后调用下
BScroll.refresh()
方法,最好是间隔个几百毫秒 - 子元素内有图片没加载完,在图片的onload事件内调用下
BScroll.refresh()
方法 - 插件中有个
observe-dom
设置之后不生效不知道为啥
- 子元素使用了ajax生成,在生成完毕后调用下