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）并忘记它。

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

====目标====

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

Answer 1

我为这个小提琴做了一个例子：https://jsfiddle.net/7ugf4jm5/

小提琴内部元素

滚动内部元素时：

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（）是彼此的符号反转。

scrollTop vs getBoundingClientRect（）。top

1 个答案: