Scroll Indicator称之为滚动指示器，是Web中常见的一种效果。用户滚动垂直滚动内容时，页面顶部有一个类似进度条的效果，当内容滚动到页面最低端，进度条效果填满整个进度条。感觉描述得有点绕，还是录制一个动效图，用图来说明这种效果，毕竟一图胜过千言万语：

以前实现这种效果都需要借助于JavaScript，或者说是采用jQuery的插件。网上有关于这方面的介绍的文章也很多，比如：

• @PANKAJ PARASHAR的《Reading Position Indicator》
• @Jonathan Cutrell的《How to Build a Page Scroll Progress Indicator With jQuery and SVG》

但今天咱们要说的是使用纯CSS制作Scroll Indicator效果。说到这里，大家或许会问，这样的效果用CSS实现，吹了吧。其实使用纯CSS实现一点也没有问题。如果你感兴趣，欢迎接着往下阅读。

Scroll Indicator几个关键点

先来看JavaScript的做法：

看代码变化就清楚，通过JavaScript改变容器scroll-line的width值。也就是在滚动内容的时候，width值从0%变化到100%。其中最重要的是要知道滚动条位置的计算。在整个计算中，要知道两个重要的参数:

• document height:文档的高度$(document).height()
• window height: 视窗高度$(window).height()

如下图所示：