javascript - 如何确定 HTML5 元素何时被查看？

Question

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

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

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

应该指出的是，我已经看过“onfocus”事件，该事件(从其官方描述来看)似乎仅适用于用户选择或“单击”元素本身上或内部的某处。

Answer 1

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

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

当元素进入 View 时，控制台会打印“in view”。

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