better-scroll.js——一款更好用的移动端滚动插件
今天给大家介绍一款很好用的移动端滚动插件：better-scroll.js，它真可以算得上是实至名归，功能可谓是相当强大了。
我们先来看看它具体有哪些优势吧。
① 原生。不依赖于任何库或框架，完全基于原生 JS 实现。
② 轻量。编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb！
③ 强大。对于那些常规的滚动需求（如图片轮播，局部文字滚动等）均可轻松满足，完全可以媲美 Swiper.js 和 iScroll.js 等经典插件。
一、用法
1. 基础用法
new BScroll(".wrapper");
或者
let wrapper = document.querySelector('.wrapper');
new BScroll(wrapper);
以上两种方式都可以，其中wrapper为外层容器，而它只能有一个子元素。例如：
<div class="wrapper">
<ul class="content">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<!-- 这里可以放一些其它的 DOM，但是会被忽略，且不会影响content部分滚动 -->
</div>
content元素就是滚动元素，它是wrapper的唯一子元素，且其高度必须大于wrapper的高度（若为横向滚动则content宽度须大于wrapper宽度），否则无法滚动。
我们可以继续看上面的例子，如果要实现一个最基本的滚动效果，还需要自己给它添加点样式才行。
/*设置高度是为了让content高度大于wrapper高度，否则无滚动效果*/
.wrapper{ height: 100px; overflow: hidden; background: #eee;}
这样一个简单的可滑动文字列表效果就出来了：
2. 进阶用法
上面只是简单讲了 better-scroll.js 最基础用法，无需任何配置即可使用。然鹅，很多情况下其实我们可能有其他各种类型滚动效果，如图片轮播、整屏滚动、多屏多向切换等。
① 图片轮播
说到图片轮播，我们首先可能想到的就是经典的 Swiper.js，而事实上我们其实还可以使用更加轻量级的 better-scroll.js 来替代。例如：
<div class="wrapper">
<ul class="content">
<li><img src="./images/img1.jpg" alt=""></li>
<li><img src="./images/img2.jpg" alt=""></li>
<li><img src="./images/img3.jpg" alt=""></li>
</ul>
</div>
.wrapper{ width: 600px; height: 320px; overflow: hidden;}
.content{ margin: 0; padding: 0; width: 1800px; overflow: hidden;}
.content li{ float: left; width: 600px; list-style: none;}
.content li img{ display: block; width: 100%;}
new BScroll('.wrapper', {
scrollX: true,
scrollY: false,
snap: { // 滑动切换的一些配置
speed: 800, // 滑动切换的速度
easing: { // 滑动切换的动画效果
style: 'ease-in'
},
threshold: 0.5, // 滑动切换到超过一半时切换到下一屏
stepX: 600, // 横向切换距离为轮播图宽度
}
});
实现效果如下：
可以看到，better-scroll.js 相对 Swiper.js 配置更加灵活，这是因为前者更加偏向于自由滑动，而后者更加偏重于轮播图效果，如果你不想自己手写样式和这么细的滑块配置的话，还是使用 Swiper.js 相对好一些。
② 整屏滚动
有了上面图片轮播的案例，整屏滚动看起来就简单了许多，因为 better-scroll.js 本身默认就是竖屏滚动，因此配置会更加简洁。
<div class="wrapper">
<ul class="content">
<li>第一屏</li>
<li>第二屏</li>
<li>第三屏</li>
</ul>
</div>
body{ margin: 0;}
.wrapper{ height: 100vh; overflow: hidden;}
.content{ margin: 0; padding: 0;}
.content li{ display: flex; justify-content: center; align-items: center; height: 100vh; list-style: none; font-size: 50px; font-weight: bold; color: #fff;}
.content li:nth-child(1){ background: #f00;}
.content li:nth-child(2){ background: #0f0;}
.content li:nth-child(3){ background: #00f;}
new BScroll('.wrapper', {
snap: { // 滑块切换的一些配置
threshold: 0.5, // 滑动切换到超过一半时切换到下一屏
stepY: window.innerHeight // 纵向切换距离为窗口高度
}
});
实现效果如下：
③ 多屏多向切换
这个切换方式可能比较少见，但是有时候确实可能需要实现这样的效果。
<div id="app">
<article class="container">
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
</article>
</div>
// Less代码
body{ margin: 0;}
body,
#app{
width: 100vw; height: 100vh; overflow: hidden;
}
.container{
display: grid;
width: 300vw;
height: 300vh;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.section{
height: 100vh;
}
.loop(@i) when (@i <= 9){
.section:nth-of-type(@{i}){
background: url("../images/puzzle_img@{i}.jpg") no-repeat center; background-size: cover;
}
.loop(@i+1);
}
.loop(1);
new BScroll('#app', {
scrollX: true,
bounce: false,
snap: {
threshold: 0.5,
stepX: window.innerWidth,
stepY: window.innerHeight
}
});
实现效果如下：
需要注意上面css部分其实写的是Less代码，里面用到了样式的循环，所以用Less等预编译语言写起来会轻松一些。
二、常见问题
1. 无法滚动
① 检查内容长度是否比外层容器长度要长，这个在文章开头有提过。
② 检查配置是否正确，看看是不是把滚动禁用了。
2. 无法触发点击事件
better-scroll 默认会阻止浏览器的原生 click 事件，所以须添加以下配置：
click: true
3. 无法长按识别二维码
这个是因为 better-scroll 会阻止浏览器的默认行为，比如页面原生的滚动功能，当然也包括长按识别二维码的功能，所以为了局部解除禁止，须添加以下配置：
preventDefaultException: {
className: /^（此处填二维码图片的class属性）$/
}
例如，有个二维码图片标签如下：
<img class="qrcode" src="./images/qrcode.png" />
则相应的 better-scroll 配置为：
preventDefaultException: {
className: /^qrcode$/
}
三、常用配置
为了方便使用，最后我给大家简单总结了一份比较常用的 better-scroll 配置：
{
click: true, // 元素可触发点击事件
scrollX: false, // 横向可滑动，默认为false
scrollY: true, // 纵向可滑动，默认为true
bounce: false, // 当滚动超过边缘的时候无回弹动画
preventDefaultException: { // 设置局部某元素原生事件不被禁止（默认preventDefault为true）
className: 【正则表达式】
},
snap: { // 滑动切换的一些配置
speed: 800, // 滑动切换的速度
easing: { // 滑动切换的动画效果
style: 'ease-in'
},
threshold: 0.5, // 滑动切换到超过一半时切换到下一屏
stepX: window.innerWidth, // 横向切换距离为窗口宽度
stepY: window.innerHeight // 纵向切换距离为窗口高度
}
}
具体用法详见→ https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/
