better-scroll.js 移动端滑动兼容

中文文档地址：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;

滚动没生效的常见情况

1. 初始化之后元素的高度变化了
   1. 子元素使用了ajax生成，在生成完毕后调用下BScroll.refresh()方法，最好是间隔个几百毫秒
   2. 子元素内有图片没加载完，在图片的onload事件内调用下BScroll.refresh()方法
   3. 插件中有个observe-dom设置之后不生效不知道为啥

动物饲料