扫一扫分享
ScrollBooster是一个轻量级滚动库。实现手机上的拖动反弹效果,可以限制拖动方向等效果,它可用于表格、图像和任何其他内容。
npm i scrollbooster或者
<script src="https://unpkg.com/scrollbooster@1.0.4/dist/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 | First 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 | 销毁所有实例的事件侦听器 |
仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!
手机预览