如何确定何时查看了 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>

Answer 2

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

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

您可以考虑使用或研究它们如何工作的一些相关代码（这些代码往往是基于 jQuery 的，因为如果不基于通用 DOM 库，它们更难共享）：

用于 jQuery 的延迟加载插件

元素 "in view" Event jQuery 插件

滚动后检查元素是否可见 - 纯 JS

Answer 3

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

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

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

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

Answer 4

如前所述，没有"事件"，但有人已经编写了一个方法来"检测 DOM 元素是否真正可见"（标题）。它不需要 JQuery。您可能需要检查多个事件（如文档加载、滚动或窗口大小调整）的值。