实现滚动条进度的三种方法

 

1、比较常用的方法应该是JavaScript或者jquery来实现，监听滚动的高度，动态设置滚动条的宽度；

var windowHeight=window.screen.height,//屏幕的高
bodyHeight=document.getElementsByTagName("body")[0].offsetHeight-windowHeight,//获取body的高度，这里需要减掉的屏幕的高
scroll=document.getElementsByClassName("scroll")[0];//获取滚动条

window.onscroll=function(){
  //获取网页被卷去的高度
	var scrollTop= document.documentElement.scrollTop,scrollHeight=scrollTop/bodyHeight*100+"%";
	scroll.style.width=scrollHeight;
}

2、通过CSS3的渐变和伪元素实现；

body{    
    background: linear-gradient(to right top, lightgreen 50%, white 50%);
    background-size: 100% calc(100% - 100vh + 5px);
    background-repeat: no-repeat;
}
body::after{
    content:'';
    position: fixed;
    top: 5px;
    bottom: 0;
    width: 100%;
    z-index: -1;
    background: white;
}

3、HTML5的新标签<progress>，浏览器兼容性较差；

滚动时设置value，即可实时显示滚动进度；

<progress value="10" max="100"></progress>

可自定义样式

progress{
	position:fixed;
	top:0;
	left:0;
        width：100%;
	height:5px;
	border: 1px solid #fff;  
	background-color:lightgreen ;
        color: lightgreen ; /*IE10可设置已完成进度的背景色*/
}
progress::-moz-progress-bar { background: #fff; }
progress::-webkit-progress-bar { background: #fff; }
progress::-webkit-progress-value  { background: lightgreen ; }
progress::-webkit-progress-bar { border-radius: 4px; } 

 

效果如下：