Question

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

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

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

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

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库，它们更难分享）：

Lazy Load Plugin for jQuery

Element "in view" Event jQuery Plugin

Check if Element is Visible After Scrolling - plain JS

Answer 3

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

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

查看

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

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

Answer 4

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

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

4 个答案: