better-scroll是什么
1.BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件，适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。简而言之，移动端滚动神器。以下简称BS。
2.基于原生js开发，不依赖任何插件，所以既可以原生 JavaScript 引用，也可以与目前流行的前端 MVVM 框架结合使用。
3.目前最好用的移动端滚动插件，没有之一，1.8版本之后PC端也可以使用
阅读本文你可以学到什么
网上有大量的BS配合MVVM使用的案例，所以我这不多说，本系列文章讲的是BS如何配合原生JS使用，考虑到很多公司或企业并没有使用MVVM类框架。
开始使用
1.初始布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Document</title> <style> </style> <style> body{ margin: 0; } body,html{ height: 100%; } ul,ol{ list-style: none; padding: 0; margin: 0; } .con{ width: 100vw; height: 100vh; /* 外框一定要设置高度 如果不设置 将没有效果 */ overflow: hidden; } /* 横向滑屏 */ ul{ /* width: 150vw; */ } ul>li{ width: 100%; height: 40px; line-height: 40px; text-indent: 20px; border-bottom: 1px solid #666666; color: #333333; } .demo{ width: 100%; height: 100px; background: hotpink; } </style> </head> <body> <div class="con"> <ul class="list"> </ul> <!-- 没效果或被盖住 不建议这么使用 --> <div class="demo"> </div> </div> </body> </html>
基础的列表布局完成，那么现在引入BS，此文用的是BS v1.12.1 (CDN)版本，大家使用的时候请务必注意版本号，版本低的可能有些功能不支持
<script type="text/javascript" src="https://unpkg.com/better-scroll@1.12.1/dist/bscroll.min.js"></script>
模拟初始数据
<script> function getData(){ var list = document.querySelector(".list"); var html = ""; for(var i = 0; i < 30; i++){ html += "<li>我是第"+(i+1)+"个li</li>" } list.innerHTML = html; } window.onload = () => { getData(); } </script>
现在我们刷新页面，能看到的是生成了一个ul列表，但是无法滑动，因为设置了overflow:hidden;
//初始化con function con(){ var con = document.querySelector(".con"); var bscroll = new BScroll(con,{ //x轴偏移量 // startX: 150, //y轴偏移量 // startY: 150 //横向是否可以滑屏 scrollX:true, //纵向是否可以滑屏 scrollY:true, //缓冲动画 momentum:true }); //事件 bscroll.on("beforeScrollStart",()=>{ //每次开始滚动的时候 console.log("我要滚动了"); }) } window.onload = () => { getData(); con(); }
初始化之后，我们看到系统自带的滚动条已经消失不见了。这个区域还可以正常滑动，那么就是组件生效了
为什么不建议使用原生滚动条，主要有以下几点
原生的滚动条可能自带回弹
如果有叠层 后面显示不了或显示不全
阻止事件穿透只能清除默认事件
FAQ
BScroll滚动的元素的是当前元素下的第一个子元素(下标为0), 以上案例为.con下的ul。
如果在ul下再次添加元素，比如以上案例中class为demo的div，它不仅无法滚动，甚至会被ul覆盖
外框(以上案例的con)一定要设置高度，否则无法滚动
