如何确定何时查看了 HTML5 元素？

Question

我想知道是否有任何 HTML5 事件与用户是否已查看或“滚动到视图”相关联。

一个例子可能是底部有元素的较长页面，尚未滚动到用户视图中......

我已经看到了这个问题的 jQuery 解决方案，但是我只对弄清楚天气是否可以完全通过使用 HTML5 事件和 JavaScript 来实现感兴趣。

应该注意的是，我已经看过“onfocus”事件，它（从它的官方描述来看）似乎只适用于用户选择或“点击”元素本身或元素内部的某处。

Answer 1

在纯 JavaScript 中，您可以使用事件“scroll”和 getBoundingClientRect().bottom <= window.innerHeight 来确定 html 元素是否进入视图。

document.addEventListener("scroll", inView);

function inView() {
    if (document.getElementById("viewElement").getBoundingClientRect().bottom <= window.innerHeight) {
        console.log("in view");
        // uncomment below if you only want it to notify once
        // document.removeEventListener("scroll", inView);
    }
}

当元素进入视图时，控制台打印“在视图中”。

<div id="viewElement">Hello there!</div>