1.1.1 • Published 7 years ago
scroll-progress v1.1.1
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)