前端滚动插件：better-scroll

╰+哭是因爲堅強的太久メ 2023-10-11 09:58 24阅读 0赞

## better-scroll 是什么 ##

better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。  
better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。

## 官方文档写得很详细 ##

[点击这里立刻传送到better-scroll开发文档][better-scroll]

## 以下是better-scroll的API ##

方法 / 通用  
better-scroll 提供了很多灵活的 API，当我们基于 better-scroll 去实现一些 feature 的时候，会用到这些 API，了解他们会有助于开发更加复杂的需求。

## refresh() ##

参数：无  
返回值：无  
作用：重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。

## scrollTo(x, y, time, easing) ##

参数：

*  \{Number\} x 横轴坐标（单位 px）
 *  \{Number\} y 纵轴坐标（单位 px）
 *  \{Number\} time 滚动动画执行的时长（单位 ms）
 *  \{Object\} easing 缓动函数，一般不建议修改，如果想修改，参考源码中的 ease.js 里的写法

返回值：无  
作用：滚动到指定的位置，见 Demo 。

## scrollBy(x, y, time, easing) ##

参数：

*  \{Number\} x 横轴距离（单位 px）
 *  \{Number\} y 纵轴距离（单位 px）
 *  \{Number\} time 滚动动画执行的时长（单位 ms）
 *  \{Object\} easing 缓动函数，一般不建议修改，如果想修改，参考源码中的 ease.js 里的写法

返回值：无  
作用：相对于当前位置偏移滚动 x,y 的距离。

## scrollToElement(el, time, offsetX, offsetY, easing) ##

参数：

*  \{DOM | String\} el 滚动到的目标元素, 如果是字符串，则内部会尝试调用 querySelector 转换成 DOM 对象。
 *  \{Number\} time 滚动动画执行的时长（单位 ms）
 *  \{Number | Boolean\} offsetX 相对于目标元素的横轴偏移量，如果设置为 true，则滚到目标元素的中心位置
 *  \{Number | Boolean\} offsetY 相对于目标元素的纵轴偏移量，如果设置为 true，则滚到目标元素的中心位置
 *  \{Object\} easing 缓动函数，一般不建议修改，如果想修改，参考源码中的 ease.js 里的写法

返回值：无  
作用：滚动到指定的目标元素。

## stop() ##

参数：无  
返回值：无  
作用：立即停止当前运行的滚动动画。

## enable() ##

参数：无  
返回值：无  
作用：启用 better-scroll, 默认 开启。

## disable() ##

参数：无  
返回值：无  
作用：禁用 better-scroll，DOM 事件（如 touchstart、touchmove、touchend）的回调函数不再响应。

## destroy() ##

参数：无  
返回值：无  
作用：销毁 better-scroll，解绑事件。

[better-scroll]: https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#%E8%B5%B7%E6%AD%A5