javascript - 如何获取在视口中可见的第一个 DOM 元素？

Question

如何获取在视口中可见的第一个 DOM 元素？

PS：当我滚动到页面的中间或底部时，页面中的第一个 DOM 元素不会是第一个“可见”元素

Answer 1

考虑到滚动，您需要查询整个文档，获取元素的偏移位置，并将其scrollTop与窗口的值相匹配。然后查询那些:eq(0)（jQuery）。

编辑：我认为这个示例会起作用，但还没有尝试过，因为我无法在工作计算机上访问任何小提琴。

$(function () {
    var scroll = $(window).scrollTop();
    var elements = $("*"); // VERY VERY bad performance tho, watch out!
    var el;
    for (var i=0; i<elements.length; i++) {
        el = $(elements[i]);
        if (el.offset().top >= scroll && el.is(':visible')){
            // "el" is the first visible element here!
            // Do something fancy with it

            // Quit the loop
            break;
        }
    }
});

Answer 2

$(function () {
    var $sections = $(".main > section");
    var idxCurSection = -1; // Index of first visible section
    var scroll = $(window).scrollTop();
    var el;
    for (var i = 0; i < $sections.length; i++) {
        el = $($sections[i]);
        if (el.offset().top >= scroll && el.is(':visible')) {
            idxCurSection = i;
            break;
        }
    }
    if (idxCurSection === -1)
        idxCurSection = $sections.length - 1;

    alert("Index of first visible section: " + idxCurSection);
});