1.1.1 • Published 7 years ago

scroll-progress v1.1.1

Weekly downloads
1
License
ISC
Repository
-
Last release
7 years ago

npm

a plugin to show a progress-bar at container top or bottom and display the progress you have been scrolled. 该插件用于在滚动容器顶部或底部显示一个进度条,显示滚动的进度。

var ScrollProgress = require('scroll-progress');

var container = document.querySelector('.container'); var scrollProgress = new ScrollProgress(container, { height: '1', delay: '1000', color: 'red', top: false }); scrollProgress.init(); }

# Install·安装方法

$ npm install scroll-progress

# Quick Start·快速开始
- 引包

var ScrollProgress = require('scroll-progress');

- 获取滚动的父元素/容器

//HTML

//Javascript var container = document.querySelector('.container');

- 实例化scroll-progress并设定参数

var scrollProgress = new ScrollProgress(container, { height: '1', delay: '1000', color: 'red', top: false });

- 初始化scroll-progress

scrollProgress.init();

- 完成 done!

# Options·可配置参数

| name | type | default | desciption |
|---|---|---|---|
| height | {number} | 5 | progress-bar's height 进度条高度 |
| delay | {number} | 200 | progress-bar's transition-delay 进度条动画延迟 |
| color | {string} | 'skyblue' | progress-bar's color 进度条颜色 |
| top | {boolean} | true | progress-bar's position,top or bottom 进度条在顶部还是底部 |

# Demo·演示
[scroll-progress-demo](https://github.com/tonyerx/scroll-progress-demo.git)
1.1.1

7 years ago

1.1.0

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago