better-scroll 详解

发布时间：2026/7/19 2:19:29

为祖国的复兴而读书

您的支持是我继续创作及维护的动力，感谢打赏，祝您工作顺利，生活美满！！！

介绍：在我们日常的移动端项目开发中，处理滚动列表是再常见不过的需求了，可以是竖向滚动的列表，也可以是横向的，用better-scroll可以帮助我们实现这个

官方文档

better-scroll 是什么

better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。

better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，zip 后仅有9kb，是一款非常轻量的 JS lib。

怎么使用 better-scroll

结构

例：常见的列表滚动

<divclass="wrapper"><ulclass="content"><li>...</li><li>...</li>...</ul></div>

以上代码better-scroll 是作用在外层 wrapper 容器上的，滚动的部分是 content 元素。

加载

<script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script>

实例化

>varBScroll=newBScroll('.wrapper');

特别注意

better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。
外盒子设置固定宽或高和属性：overflow: hidden;

当 content的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动了，这就是 better-scroll 的滚动原理。

绿色部分为 wrapper，也就是父容器，它会有固定的高度
黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。

better-scroll 支持很多参数配置，可以在初始化的时候传入第二个参数。

比如：

letscroll=newBScroll('.wrapper',{scrollY:true,click:true})

这样就实现了一个纵向可点击的滚动效果。better-scroll 支持的参数非常多，可以修改它们去实现更多的特性。通常你可以不改这些参数。

API

api 里面所有的方法和属性都是实例化对象的。

on （方法）

on(type,fn,context)

参数：

type：事件名
fn：回调函数
context：函数执行的上下文环境，默认是this
返回值：无
作用：监听当前实例上的自定义事件。如：scroll，scrollEnd，pullingUp,pullingDown等

示例：

importBScrollfrom"better-scroll"letscroll=newBScroll(".wrapper")functiononScroll(pos){console.log("scroll")}scroll.on("scroll",onscroll)

scroll （事件）

bs.on(“scroll”,function(){})

参数：{Object} {x, y} 滚动的实时坐标

触发时机：滚动过程中，具体时机取决于选项中的 probeType。

probeType （属性）

作用：有时候我们需要知道滚动的位置。

类型：Number
默认值：0
可选值：1、2、3
当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。如果没有设置该值，其默认值为 0，即不派发 scroll 事件。

scrollEnd （事件）

参数：{Object} {x, y} 滚动结束的位置坐标
触发时机：滚动结束。

maxScrollY （属性）

类型：Number
作用：scroll 最大纵向滚动位置。
备注：scroll 纵向滚动的位置区间是 0 - maxScrollY，并且 maxScrollY 是负值。

scrollX （属性）

类型：Boolean
默认值: false
作用：当设置为 true 的时候，可以开启横向滚动。
备注：当设置 eventPassthrough 为 ‘horizontal’ 的时候，该配置无效。

refresh （方法）

作用：重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。例：scroll.refresh();

小栗子：上拉加载，下拉刷新

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><style>*{margin:0;padding:0;}html, body{width:100%;height:100%;}.wrapper{width:100%;height:100%;overflow:hidden;}.content{border:solid blue 1px;}.pull-down, .pull-up{position:absolute;width:100%;height:50px;line-height:50px;text-align:center;color:#fff;background:#999;}.pull-down{top:-50px;}.pull-up{bottom:-50px;}li{width:100%;height:50px;border:solid red 1px;}</style><scriptsrc="js/bscroll.min.js"></script><script>window.onload=function(){varp=document.querySelector(".pull-down");varup=document.querySelector(".pull-up");//获取展示内容高度varh=p.offsetHeight;//标识，当前是否加载完成数据varendDate=0;//创建上拉加载的数据vardata=[];//循环添加数据for(leti=16;i<=30;i++){data.push("列表"+i)}//实例化better-scrollvarbs=newBScroll(".wrapper",{probeType:2//实时获取滚动坐标位置});//给实例化对象绑定事件方法bs.on("scroll",onScroll);bs.on("scrollEnd",scrollEnd);//滚动结束后执行scrollEndfunctionscrollEnd(){varselect=p.getAttribute("select");varselectUp=up.getAttribute("select");if(select){// console.log("刷新");//刷新页面location.reload();}if(selectUp){// console.log("加载");loadData();}}//加载数据的构造函数functionloadData(){//splice 返回截取数据，修改原数组长度//map//判断数组数据是否为空，不为空继续添加节点数据，否则提示数据为空if(data.length>0){//endDate:数据表示还有endDate=0;varnewData=data.splice(0,5);document.querySelector(".list").innerHTML+=newData.map(function(item){return"<li>"+item+"</li>"}).join("");bs.refresh();}else{up.innerHTML="没有数据了";//endDate:数据表示没有了，为空endDate=1;}}//获取滚动的实时坐标位置functiononScroll(){//坐标大于提示文字高度后展示相应内容，否则内容if(bs.y>h){p.innerHTML="释放刷新..."p.setAttribute("select",true);}else{p.innerHTML="下拉刷新"p.removeAttribute("select");}//endDate 来判断是否是已经加载完毕if(!endDate){if(bs.y<(bs.maxScrollY+-h)){up.innerHTML="释放加载...";up.setAttribute("select",true);}else{up.innerHTML="上拉加载"up.removeAttribute("select");}}}}</script></head><body><divclass="wrapper"><!-- 滚动DOM --><divclass="content"><pclass="pull-down">下拉刷新</p><ulclass="list"><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li><li>列表5</li><li>列表6</li><li>列表7</li><li>列表8</li><li>列表9</li><li>列表10</li><li>列表11</li><li>列表12</li><li>列表13</li><li>列表14</li><li>列表15</li></ul><pclass="pull-up">上拉加载</p></div></div></body></html>