JavaScript 实现网页滚动进度

依然是没什么卵用的代码段,也是看着玩的。

核心是两个监听代码,监听缩放滚动的事件。只对垂直滚动有效。


//获取网页可视页面的高度
var pageHeight = document.documentElement.clientHeight;
window.addEventListener('resize', function(){
pageHeight = document.documentElement.clientHeight;
}, false);

window.addEventListener("scroll", function() {
//获取滚动条据顶部的距离
var currentHeight = document.documentElement.scrollTop || document.body.scrollTop;
//获取整个网站页面的高度
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
//将整体高度减去可视页面高度算出剩下内容的百分比,不这样的话,第一次滚动不是0%开始。输出的值只取整数
console.log(parseInt(100*currentHeight/(scrollHeight-pageHeight))+"%");
}, false);

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.