javascript - 网页长列表项印象

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、 的对象宽度 和高度。

您还应该检查窗口高度:

const height = window.innerHeight;

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

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

您可能还想检查显示的元素的百分比(取决于您决定开始计算展示次数的时间:完整 View 或部分 View )。