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

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

---

PS：当我滚动到页面的中间或底部时，页面中的第一个DOM元素将不是第一个“可见”元素。考虑到滚动，您需要查询整个文档，获取元素偏移位置，并将其与窗口的

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

$（函数（）{
var scroll=$（窗口）.scrollTop（）；
var elements=$（“*”）；//非常非常糟糕的性能，注意！
var-el；
对于（变量i=0；i=scroll&&el.is（':visible'））{
//“el”是这里第一个可见的元素！
//用它做些花哨的事
//退出循环
打破
}
}
});

$（函数（）{
var$sections=$（“.main>section”）；
var idxCurSection=-1；//第一个可见节的索引
var scroll=$（窗口）.scrollTop（）；
var-el；
对于（变量i=0；i<$sections.length；i++）{
el=$（$节[i]）；
如果（el.offset（）.top>=滚动（&el.is）（“：可见”）{
idxCurSection=i；
打破
}
}
if（idxCurSection==-1）
idxCurSection=$sections.length-1；
警报（“第一个可见部分的索引：“+idxCurSection”）；
});

我正在测试您的代码，很抱歉这个新手问题：为什么我必须用jquery函数封装所有代码，以及为什么我必须这样做：el=$（elements[I]）；而不是：el=elements[i]jQuery函数只是

$（document.ready（）

的简写。我想你可以直接做

el=elements[I]

，是的，我不是很确定，所以我很安全（因为我自己无法调试），我使用这个，但是如果你有很多元素要循环，它会变得很慢。还有其他方法吗？提高性能的一种方法是以第3步或第5步循环遍历元素，如果某个元素在视口中，则返回到上一个第三/第五个元素，并从此处开始检查每个元素。相关：最后：

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