a plugin to show a progress-bar at container top or bottom and display the progress you have been scrolled. 该插件用于在滚动容器顶部或底部显示一个进度条,显示滚动的进度。
var ScrollProgress = ; var container = document;var scrollProgress = container height: '1' delay: '1000' color: 'red' top: false;scrollProgress;}
Install·安装方法
$ npm install scroll-progress
Quick Start·快速开始
- 引包
var ScrollProgress = require('scroll-progress');
- 获取滚动的父元素/容器
//HTML
<div class="container">
<div class="content-wrapper">
<!-- input your content here -->
</div>
</div>
//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 进度条在顶部还是底部 |