Javascript 网页长列表项目印象

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

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

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

--------一开始没见过-------



....

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

---

可能被称为Impression，但我找不到任何关于它的信息。

在任何HTML元素上，您都可以使用

getBoundingClientRect（）获取其在屏幕上的位置。

：

结果是具有以下属性的对象：

顶部

，

右侧

，

底部

，

左侧

，

宽度

和

高度

您还应检查窗户高度：

const height = window.innerHeight;

现在，您可以将元素边界矩形的

top

和

bottom

值与窗口高度进行比较，以确定其是否可见：

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

函数可见（矩形、高度）{
返回rect.top>=0&&rect.bottom

---

您可能还需要检查所显示元素的百分比（取决于您决定何时开始计算印象：全视图还是局部视图）。

您是指检测屏幕上显示哪些项目的技术方法？或者更抽象一些？我可以问一下，为什么确定这些项目的可见性对您很重要吗？只是想确保这里没有XY问题。可能只是显示在视口中可见的问题。如果用户打算向下滚动，则获取下一个，直到您不再在视口中渲染一个。重复…可能相关：-同时检查和。一种检测看到哪些项目的技术方法。

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