Question

我正在尝试获取div的顶部偏移量，并且我有以下代码在页面滚动时运行：

var $elem = document.querySelector(selector);
var elemTop = $elem.offsetTop;
console.log(elemTop);

但是当我滚动它时总是将0打印到控制台，即使该元素低于折叠。

Answer 1

var elmTop = $elem.getBoundingClientRect().top + window.scrollY;

element.getBoundingClientRect()给出视口内的位置，window.scrollY给出从视口顶部到文档顶部的距离。

Answer 2

如何检查滚动是否到达某个元素的解决方案：

    const getOffsetTop = function(element) {
        if (!element) return 0;
        return getOffsetTop(element.offsetParent) + element.offsetTop;
    };

    const $el = document.querySelector(".button");

    window.addEventListener("scroll", function() {
        console.log(window.scrollY + window.innerHeight > getOffsetTop($el));
    });

从页面顶部获取项目偏移量

2 个答案: