网页长列表项印象

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;
}

您可能还需要查看所显示元素的百分比(取决于您决定开始统计展示次数的时间：完整视图或部分视图(。