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; }
效果如下: