@zhangjicheng/scroller

✨ 特性

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

🖥 支持环境

• 现代浏览器和 IE9 及以上。

📦 安装

>  npm install --save @zhangjicheng/scroller

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

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

🔨 示例

window 滚动

# .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 zhangjichengcc@163.com