轻量级滚动插件ScrollBooster

所属分类：UI,输入-滚动,拖和放

29455 294 查看评论 (4)

分享到微信朋友圈

查看演示立即下载

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

发布时间：2018-3-30 1:49

ScrollBooster大小只有2kb

安装

您可以通过npm软件包管理器安装它，或者直接删除脚本标签：

npm i scrollbooster

引用js文件

<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	销毁所有实例的事件侦听器

完整示例

let viewport = document.querySelector('.viewport')
let content = document.querySelector('.viewport-content')

let sb = new ScrollBooster({
  viewport: viewport,
  content: content,
  handle: document.querySelector('.viewport-scroller'), 
  bounce: true,
  textSelection: false,
  emulateScroll: false,
  onUpdate: (data)=> {
    content.style.transform = `translate(
      ${-data.position.x}px,
      ${-data.position.y}px
    )`
    // and also metrics: data.viewport['width'|'height'] and data.cotent['width'|'height']
  }
})

// methods example:
sb.updateMetrics()
sb.setPosition({
  x: 100,
  y: 100
})
sb.destroy()

自适应创意展示jQuery和CSS3的网站模板

jQuery消息通知显示插件MessageNotifyPlugin