scrollTop vs 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;
}

我做了以避免滚动(/sf/answers/1252986941/)并忘了它.

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

====目标====

在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()是彼此的符号反转.