@zhangjicheng/scroller NPM

页面滚动插件

npm.io npm.io npm.io npm.io

✨ 特性

轻量：gzip 大小不足1kb
易用：完善的ts参数及方法提示，让您不查看文档也可玩转 @zhangjicheng/scroller

🖥 支持环境

现代浏览器和 IE9 及以上。

📦 安装

>  npm install --save @zhangjicheng/scroller

  // esm
  import Scroller form '@zhangjicheng/scroller';

  // commonjs
  const moment = require('@zhangjicheng/scroller');

🔨 示例

# .js

// 实例化滚动插件
const scroller = new Scroller();
// 调用滚动方法
scroller.scrollTo(500);

# .html

<div id="scroll-container">
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
    <li>item9</li>
  </ul>
<div>

# .js

// 实例化滚动插件
const scroller = new Scroller(document.getElementById('scroll-container'));

scroller.scrollTo(500);

# .js

// 实例化滚动插件
const scroller = new Scroller(document.getElementById('scroll-container'), {
  easing: 'ease',    // 'ease' | 'linear'
  duration: 500,     // 动画时间，默认300ms
});

function cb(y) {
  console.log(y); // 打印每次滚动的位置
}

// 调用滚动方法
scroller.scrollTo(500, cb);

参数及使用说明

实例化参数

new Scroll(dom, options) 接收两个参数 dom & options

dom: 当前滚动dom元素，默认为窗口 window
options配置项 |参素值|参数类型|必填|默认值|方法说明|版本| |-|-|-|-|-|-| |duration|number|N|300|滚动时长|v1.0.0| |ease|'ease' \| 'linear'|N|ease|动画类型|v1.0.0|

实例方法/属性说明

方法

方法	说明	版本
`scrollTo(y: number, cb?: (y: number) => void)`	自动滚动方法，固定时间内滚动到指定位置，传递滚动距离及回调方法，回调方法返回每次滚动的位置，非必填	v1.0.0
`start(speed: number, cb?: (y: number) => void)`	滚动方法，传递滚动距离及回调方法，回调方法返回每次滚动的位置，非必填	v1.1.0
`stop(speed: number, cb?: (y: number) => void)`	滚动方法，传递滚动距离及回调方法，回调方法返回每次滚动的位置，非必填	v1.1.0

属性

属性	说明	版本
`source`	滚动起始位置	v1.0.0
`target`	滚动结束位置	v1.0.0
`element`	滚动元素 `HTMLElement \\| Window`	v1.0.0
`easing`	滚动动画类型 `'ease' \\| 'linear'`	v1.0.0
`duration`	滚动持续时间默认300ms	v1.0.0