网页长列表项印象

Question

假设我们有一个很长的列表，所以有些项目可能一开始就看不到。

用户滚动屏幕后，会看到更多项目。

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

判断用户看到了哪个项目的最佳实践是什么？

可能被称为印象，但我找不到任何相关信息。

Answer 1

在任何 HTML 元素上，您可以使用 getBoundingClientRect():

获取其在屏幕上的位置

const rect = element.getBoundingClientRect();

结果是一个具有属性 top、right、bottom、left、width 和 height 的对象。

您还应该检查 window 高度：

const height = window.innerHeight;

现在，您可以将元素边界矩形的 top 和 bottom 值与 window 高度进行比较以确定它是否可见：

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

您可能还想检查显示的元素的百分比（取决于您决定开始计算展示次数的时间：完整视图或部分视图）。

Webpage long list item impression