Waypoints.js：ページの読み込み時に要素が表示されているかどうかをチェック

Question

要素が初期ページの読み込み時にwaypoints.jsで表示されているかどうかを確認する方法はありますか？

スクロールでトリガされるイベントにのみ機能を追加できるようです。

Answer 1

実際には、Waypoints.jsは、スクロールイベントが発生したときだけでなく、初期化時にも追跡される要素の位置をチェックします。そう言えば、要素がビューポートの下にあるかどうかを確認するだけです。ウェイポイントは、offsetパラメータを100%に設定することで実現できます。このように、問題の要素がビューポート内にある場合、ハンドラ関数はページロード時に呼び出されます。

以下は、2つの初期化されたウェイポイントオブジェクトを使用した実例です。

var waypoint1 = new Waypoint({ 
 
    element: document.getElementById('waypoint'), 
 
    handler: function(direction) { 
 
     console.log('#waypoint in viewport – NO OFFSET'); 
 
    } 
 
}); 
 

 
var waypoint2 = new Waypoint({ 
 
    element: document.getElementById('waypoint'), 
 
    offset: '100%', 
 
    handler: function(direction) { 
 
     console.log('#waypoint with OFFSET: 100% in viewport'); 
 
    } 
 
});

#placeholder { 
 
    height: 50vh; 
 
    background-color: #d4cdc3; 
 
} 
 

 
#waypoint { 
 
    background-color: #d5d0cd; 
 
} 
 

 
#bottom { 
 
    height: 200vh; 
 
    background-color: #a2a392; 
 
}

<div id="placeholder"></div> 
 
<div id="waypoint">[Test content]</div> 
 
<div id="bottom"></div> 
 

 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min.js"></script>