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