画面の高さの領域よりも長い DOM のオブジェクトのリストがあります。
タイムライン ツリー ビューのようなものを作成するためだけに、画面に表示されているオブジェクトを検出する必要があります。(下の写真のようなもの):
私の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>
私の目標は、コンテナーから画面上に表示される要素の ID を検出し、コンテナー内の対応する要素にクラスを#elements
割り当てることです。active
#timeline
Scroll
イベントでこのプロセスを実行する必要があります。
これを達成する方法はありますか?