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

Question

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

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

Answer 1

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

编辑:我认为这个示例可以工作，但还没有尝试过，因为我无法在工作计算机上访问这里的任何 fiddle 。

$(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;
        }
    }
});