页面滚动插件

✨ 特性

• 轻量：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|

更新日志

• v1.0.0 基本的Scroller类, 返回scroller实例，进行滚动操作；
• v1.1.0 添加 scroller.start(speed: number)、scroller.stop() 方法，实现匀速滚动，手动控制开始停止，用于table自动滚动等效果

🔗 链接

• 项目地址
• my portfolio

🤝 参与共建

• author zhangjicheng
• Email [email protected]