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

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

中文文档地址：better-scroll.github.io/docs/zh-CN/…

插件文档地址：better-scroll.github.io/docs/zh-CN/…

移动端滑动问题常见于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设置之后不生效不知道为啥

我的个人公众号：归元田居 每日分享前端知识与资讯～