web-dev-qa-db-ja.com

jQueryで画面上に表示される要素オブジェクトを取得する方法は？

画面の高さ領域よりも長いDOMのオブジェクトのリストがあります。

タイムラインツリービューのようなものを作成するためだけに、画面上の可視オブジェクトを検出する必要があります。 （下の写真のようなもの）：

enter image description here

私のDOMは次のようになります：

<!-- elements visibility on screen to be DETECTED -->
<div id="elements">
    <div id="elem-1">Lorem ipsum</div>
    <div id="elem-2">Lorem ipsum</div>
    <div id="elem-3">Lorem ipsum</div>
    <div id="elem-4">Lorem ipsum</div>
    <div id="elem-5">Lorem ipsum</div>
    <div id="elem-6">Lorem ipsum</div>
    <div id="elem-7">Lorem ipsum</div>
    <div id="elem-8">Lorem ipsum</div>
</div>


<!--elements visibility on screen to be AFFECTED  -->
<ul id="timeline">
    <li view-id="elem-1">Elem-1</li>
    <li view-id="elem-2">Elem-2</li>
    <li view-id="elem-3" class="active">Elem-3</li>
    <li view-id="elem-4" class="active">Elem-4</li>
    <li view-id="elem-5" class="active">Elem-5</li>
    <li view-id="elem-6" class="active">Elem-6</li>
    <li view-id="elem-7">Elem-7</li>
    <li view-id="elem-8">Elem-8</li>
</ul>

私の目標は、#elementsコンテナから画面上に表示される要素のIDを検出し、#timelineコンテナ内の対応する要素にactiveクラスを割り当てることです。

Scrollイベントでこのプロセスを実行する必要があります。

これを達成する方法はありますか？

javascriptjqueryhtmlcssdom
46
user2893747

まず、on-screen visible areaはViewportとして知られています。

image is took from OP and cleaned up in Photoshop

（画像はOPから取得されます。Photoshop）でクリアおよび編集されます

したがって、必要なのは、Viewport内のすべての要素を検出することです。

これはjQueryの多くのプラグインを使用して実現できますが、jQuery withinviewportと呼ばれる1つの例で説明します

ソースおよびドキュメントへのリンク： [withInViewport-Github]

ステップ1：

プラグインをダウンロードして、スクリプトにjQueryフレームワークとwithinviewportプラグインを含めます。

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="withinViewport.js"></script>
<script src="jquery.withinviewport.js"></script>

。

ステップ2：

scrollイベントで関数を初期化する：

$(window).bind("scroll", function() {
    //your code placeholder
});

。

ステップ3：

withinviewportセレクターを使用してビューポート内のすべての要素を取得し、各要素ごとに#timelineコンテナー内の対応するリスト項目にクラスを追加します。

$("#elements > div").withinviewport().each(function() {
   $('#timeline > li[view-id="'+$(this)[0].id+'"]').addClass('active');
});

ステップ4：

すべてをまとめる：

$(window).bind("scroll", function() {

    //clear all active class
    $('#timeline > li').removeClass('active');

    //add active class to timeline
    $("#elements > div").withinviewport().each(function() {
         $('#timeline > li[view-id="'+$(this)[0].id+'"]').addClass('active');
    });
});

。

。

また、このプラグインは、ビューポートの上下左右のオフセットを設定する機会を提供します。

こちらのデモをご覧ください： http://patik.com/code/within-viewport/

41
zur4ik