Question

我正在使用以下行计算滚动进度（向下滚动后从视图中隐藏的文档的百分比）：

window.pageYOffset / document.body.scrollHeight

这适用于大多数网站。但有些网站会调整滚动或溢出属性，实际上会破坏上述计算。

例如，on this page上述行始终会返回0。

有没有更好的方法来计算在这种情况下可以使用的滚动进度？

Answer 1

这是我的方法：

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    let limit = Math.max( document.body.scrollHeight, document.body.offsetHeight, 
    document.documentElement.clientHeight, document.documentElement.scrollHeight,
    document.documentElement.offsetHeight );

let footerHeight = document.querySelector('footer').offsetHeight; 

let max = limit - window.innerHeight - footerHeight;

let height =  window.pageYOffset / max * 100;

height = Math.min(100, Math.max(0, height));

const loader = document.getElementById("loader-scroll");

loader.style.width = 0 + height + "%";
}

在大多数浏览器中都可以正常运行

如何计算防弹滚动进度

1 个答案: