轻量级滚动插件ScrollBooster

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

 3800  13  查看评论 (3)
轻量级滚动插件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()
相关插件-滚动,拖和放

jquery模拟滚动条(未封装)

jquery模拟滚动条,支持自定义滚动条样式,兼容pad,web手机端未测试;支持同一网页多个滚动条;支持添加和删除(本人对封装不太了解,未封装)
  滚动
 14677  42

fullpage平滑换页+css3酷炫导航

fullpage平滑换页+css3酷炫导航
  滚动
 13276  168

自制高度可定制滚动条插件(原创)

自制原生JS高度可定制化的滚动条插件,高度自定义,轻量化,浏览器兼容良好
  滚动
 8370  104

向下滚动加载动画特效插件AOS

向下滚动网页加载动画特效插件AOS
  滚动
 10308  105

讨论这个项目(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的新语法,这样写可以不用在用去+号拼接
    回复
取消回复