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