为什么window.scrollY + element.getBoundingClientRect（）。top不等于element.offsetTop？

Question

我希望element.getBoundingClientRect()，window.scrollY和element.offsetTop能够正常工作，如下图所示。但正如您所看到的，数字不会相加（在我的情况下，pos.offsetTop - (el.getBoundingClientRect().top + window.scrollY)总是== -14）。

我做错了什么？

Answer 1

这可能是由于您网页的结构造成的。如果你看下面的例子，你会看到内部div的offsetTop仍然是51，即使它距离页面顶部超过150px。

template <typename... Ts>
constexpr auto make_metadata() {
    return std::make_tuple(Metadata<Ts, sizeof...(Ts)>{0}...);
}

var element = document.getElementById("id");
console.log(element.offsetTop)

这是因为div的父元素是表对象，而div的顶部到其父元素的距离是51px。

请看一下这个页面，深入讨论offsetTop（https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop）

此页面为offsetParent（https://developer.mozilla.org/en-US/docs/Web/API/HTMLelement/offsetParent）