Javascript window.pageYOffset和document.body.getBoundingClientRect（）之间的差异。顶部？

我正在做一个进度条，这取决于你滚动了多少。这两个我应该用哪一个

function getScrollValue() {
    return ((parseInt(document.body.getBoundingClientRect().top) * -1));
}

或

---

除了

window.pageYOffset

是更专业的API，也是检测滚动值的更高效的解决方案之外，使用

getBoundingClientRect（）.top

尝试相同的操作可能会产生意外的结果，例如，如果主体具有偏移其位置的某个边距顶部

编辑

---

我已经包括了以下内容，其中显示了两个备选方案之间的性能差异，以及第三个（较旧的）API如何与之抗衡。

一个使用进度条标记的简单示例

/*测试是否支持被动事件*/
var supportsPassive=false；
请尝试{var opts=Object.defineProperty（{}，'passive'，{get:function（）{supportsPassive=true；}}）；
addEventListener（“testPassive”，null，opts）；
removeEventListener（“testPassive”，null，opts）；
}捕获（e）{}
/*进度要素*/
const progress=document.querySelector（'progress'）；
/*滚动侦听器*/
addEventListener（'scroll'，e=>{
progress.value=pageYOffset/（document.body.clientHeight-内部高度）；
}，支持被动？{被动：真}：假）
/*拉伸并修复进度*/
进度{宽度：100%；位置：固定；}
/*添加一些滚动到页面*/
正文{边距：0；高度：20000px；}
可能是更好的解决方案。使用window.pageYOffset（IE不支持IntersectionObserver）@JakobE有一个.yesp-但在这种情况下（仅监视页面滚动），它的功能过份了（polyfill还使用滚动监听器）。如果需要，我会使用滚动侦听器和被动事件available@JakobEIntersectionObserver的存在是因为滚动处理程序的简单解决方案常常会带来性能问题。为功能强大的浏览器提高性能，同时为严重过时的浏览器提供polyfill，这并不过分。
function getScrollValue() {
    return window.pageYOffset;
}