javascript - scrollTop 与 getBoundingClientRect().top

Question

我以为 $(window).scrollTop 会告诉我滚动了多少，但是...

如果我滚动一点，我会得到:

$(window).scrollTop(): 0
$('#react-root')[0].scrollTop: 0
$('#react-root')[0].getBoundingClientRect().top: -450 // that seems to be correct

#react-root 直接附在 body 上，包含一切。事情应该如何发生？

====编辑===

好吧，我碰巧有一个不寻常的溢出设置:

html {
  overflow: hidden;
  height: 100%;
}

body {
  height: 100%;
  overflow: scroll;
}

我这样做是为了避免过度滚动 (https://stackoverflow.com/a/17899813/2054629) 而忘记了它。

这是一个重现问题 https://jsfiddle.net/7ugf4jm5/7/ 的 jsfiddle没有一个元素有一个积极的滚动顶部，而滚动确实发生了

==== 目标 ====

在 jsfiddle 描述的设置中，我有兴趣获得滚动偏移量(似乎 getBoundingClientRect 返回它)并能够将滚动位置重置为顶部。

Answer 1

我制作这个 fiddle 是为了给你看一个例子:https://jsfiddle.net/7ugf4jm5/

Fiddle 中的内部元素

滚动内部元素时:

console.log("Inner ID: " + $('#inner')[0].scrollTop);
console.log("Window: " + $(window).scrollTop());
console.log("Inner ID Bound: " + $('#inner')[0].getBoundingClientRect().top);

将输出:

Inner ID: 555.5555702727522
Window: 0
Inner ID Bound: 7.986111640930176 --> Only because there is a slight padding at the top of the element

fiddle 中的外部元素

console.log("React ID: " + $('#react-root')[0].scrollTop);
console.log("Window: " + $(window).scrollTop());
console.log("React ID Bound: " + $('#react-root')[0].getBoundingClientRect().top);

输出:

React ID: 0
Window: 666.6666843273026
React ID Bound: -658.6806030273438

$(window).scrollTop() 将在浏览器滚动时起作用。如果您将 react-root 设置为溢出滚动，它将保持在窗口的顶部，因此窗口不会滚动。您可以在我的 fiddle 中看到这个带有红色轮廓元素的示例。

但是，如果您滚动窗口，则会计算 react-root 和 window 滚动顶部。它们略有不同，但这可能是由于在浏览器中调用每个调用的时间略有不同(一个本质上是在另一个调用之后......只是时间差异非常小)。

在这种情况下，scrollTop 和 getBoundingClientRect() 是彼此的符号反转。