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 直接附着在身体上，包含一切。事情是这样发生的吗？

==== 编辑 ===

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

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

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

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

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

==== 目标====

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

Answer 1

我制作这个小提琴是为了给你看一个例子：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

小提琴中的外部元素

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 设置为溢出滚动，它将保持在窗口顶部，因此窗口不会滚动。您可以在我的小提琴中看到这个带有红色轮廓元素的示例。

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

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