ScrollBooster 介绍
ScrollBooster是 一个 轻量级滚动库。实现手机上的拖动反弹 效果 ，可以限制拖动方向等 效果 ，它可用于表格、图像和任何其他 内容 。
ScrollBooster安装
npm i scrollbooster
或者
<script src="https://unpkg.com/scrollbooster@1.0.4/ dis t/scrollbooster.min.js"></script>
使用
import ScrollBooster from 'scrollbooster'
let sb = new ScrollBooster({
viewport: document.querySelector('.viewport') // required
// ...other options
})
选项
Option
Type
Default
Description
viewport
element
null
视区-外部元素
content
element
F irs t child of viewport element
视区内可滚动 内容
handle
element
Viewport element
响应拖动事件的元素
bounce
boolean
true
惯性弹跳 效果 (滚动过去视区边框)
textSelection
boolean
false
能够选择文本 内容
friction
float
0.05
滚动摩擦因数 (指针释放后的滚动惯性)
bounceForce
float
0.1
弹跳效应因子
emulateScroll
boolean
false
模拟视区鼠标滚轮事件 (对于使用转换 属性 滚动的情况)
onUpdate
function
noop
根据接收的坐标更新元素 属性 的 用户 函数 (请参见演示示例)。接收具有 属性 的对象: 位置、视区和 内容 。每个 属性 都包含用于执行实际滚动的度量值
方法
Method
Description
setPosition
在视区中设置新的滚动位置。接收具有 属性 x 和 y 的对象? ? ? ? ?
updateMetrics
更新元素大小。对图像加载或其他动态 内容 有用
getUpdate
与onUpdate相同的格式返回当前指标和坐标? ? ? ? ?
destroy
销毁所有实例的事件侦听器
网站地址 : https://ilyashubin.github.io/scrollbooster/
GitHub: https://github.com/ilyashubin/scrollbooster
网站描述: 一个 轻量级滚动库
ScrollBooster官方网站
官方网站： https://ilyashubin.github.io/scrollbooster/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。