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

Question

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

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

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

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

Answer 1

如前所述，没有“事件”，但someone already wrote a method“检测DOM元素是否真正可见”（标题）。它不需要JQuery。您可能想要检查多个事件的值，例如文档加载，滚动或窗口调整大小。

Answer 2

在纯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>

Answer 3

由于滚动或窗口大小调整，没有内置事件可以告诉您整个DOM元素何时在页面上可见/可见。

执行此操作的唯一方法是跟踪调整大小和滚动事件（每个事件可以导致更多或更少的页面可见），然后使用滚动位置和窗口高度以及DOM元素位置来计算整个DOM元素是可见的。

您可以考虑使用或查看它们如何工作的一些相关代码片段（这些代码往往是基于jQuery的，因为如果不是基于常见的DOM库，它们更难分享）：

Lazy Load Plugin for jQuery

Element "in view" Event jQuery Plugin

Check if Element is Visible After Scrolling - plain JS

Answer 4

当我建造http://f1circle.com时，我不得不做类似的事情。 当底部横幅变得可见时，我必须向用户显示要求他登录的聚光灯。

使用angularjs实现它的代码可以在https://github.com/rajegannathan/angularUtilities/blob/master/directives/eagerload.js查看

虽然它是一个angularjs指令，但主要逻辑是普通的javascript。基本上我检查最后一个进给的下边缘是否可见，然后触发聚光灯。

如果需要，我可以解释更多。