scroll-progress

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
<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 进度条在顶部还是底部

Demo·演示

scroll-progress-demo