ScrollBooster

ScrollBooster 介绍

ScrollBooster是一个轻量级滚动库。实现手机上的拖动反弹效果，可以限制拖动方向等效果，它可用于表格、图像和任何其他内容。

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

销毁所有实例的事件侦听器

网站地址:https://ilyashubin.github.io/scrollbooster/

GitHub:https://github.com/ilyashubin/scrollbooster

网站描述:一个轻量级滚动库

ScrollBooster

官方网站：https://ilyashubin.github.io/scrollbooster/

小编说

以上是编程之家为你收集整理的ScrollBooster全部内容。

如果觉得编程之家网站内容还不错，欢迎将编程之家推荐给好友。