轻量级滚动插件ScrollBooster

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

轻量级滚动插件ScrollBooster ie兼容9

发布时间: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
})

选项

OptionTypeDefaultDescription
viewportelementnull视区-外部元素
contentelementFirst child of viewport element视区内可滚动内容
handleelementViewport element响应拖动事件的元素
bouncebooleantrue惯性弹跳效果 (滚动过去视区边框)
textSelectionbooleanfalse能够选择文本内容
frictionfloat0.05滚动摩擦因数 (指针释放后的滚动惯性)
bounceForcefloat0.1弹跳效应因子
emulateScrollbooleanfalse模拟视区鼠标滚轮事件 (对于使用转换属性滚动的情况)
onUpdatefunctionnoop根据接收的坐标更新元素属性的用户函数 (请参见演示示例)。接收具有属性的对象: 位置、视区和内容。每个属性都包含用于执行实际滚动的度量值

方法

MethodDescription
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()
相关插件-滚动,拖和放

CSS3 滚动视觉差效果加返回顶部

CSS3 滚动视觉差效果+返回顶部.
  滚动
 15856  97

仿淘宝、京东等电商网站楼层跳转滚动定位

实现电商网站的滚动监听、导航定位、返回顶部的功能
  滚动
 790  18

jQuery滚轮控制轮播图上下切换(原创)

jQuery滚轮控制轮播图上下切换,简单实用
  滚动
 9473  35

jQuery仿淘宝网右侧悬浮返回顶部和建议代码

jQuery仿淘宝网右侧悬浮返回顶部和建议代码
  滚动
 16811  46

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币

    萝卜 0
    2018/4/17 16:51:34
    是正确的,这是es6的新语法,这样写可以不用在用去+号拼接 回复
    半醒狐狸 0
    2018/4/2 9:09:29
    第12行的content.style.transform = `translate这个`是不是用错了?>_<
        萝卜1
        2018/4/17 16:53:10
        是正确的,这是es6的新语法,这样写可以不用在用去+号拼接
    回复
取消回复