ウェブページロングリストアイテムの印象

Question

長いリストがあるとしましょう。最初は表示されないアイテムもあります。

ユーザーが画面をスクロールすると、さらにいくつかの項目が表示されます。

<ul> 
    <li> 
    <li> 
    <li> 
    --------not seen at the beginning------- 
    <li> 
    <li> 
    <li> 
    .... 
</ul> 

どのアイテムがユーザーに表示されているかを判断するベストプラクティスは何ですか？

おそらくImpressionとして知られていますが、それについては何も見つかりませんでした。任意のHTML要素で

Answer 1

、あなたはgetBoundingClientRect()を使用して、画面上の位置を取得することができます：

const rect = element.getBoundingClientRect(); 

結果はproperites top、right、bottom、left、widthとheightを持つオブジェクトです。

また、ウィンドウの高さを確認してください：

const height = window.innerHeight; 

さて、あなたはそれが見えるかどうかを決定するために、ウィンドウの高さを持つ要素の境界矩形のtopとbottom値を比較することができます

function isVisible(rect, height) { 
    return rect.top >= 0 && rect.bottom < height; 
} 

表示されている要素の割合を確認することもできます（インプレッションのカウントを開始する際には、フルビューかパーシャルビューかによって異なります）。