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和width的对象height。

您还应该检查窗口高度：

const height = window.innerHeight;

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

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

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