如何检测html元素是否在浏览器窗口中？ [复制]答案

【问题标题】：How to detect if an html element is in browser window? [duplicate]如何检测html元素是否在浏览器窗口中？ [复制]
【发布时间】：2012-08-02 10:43:36
【问题描述】：

可能重复：
How to tell if a DOM element is visible in the current viewport?

有一个 HTML 页面只有一个 div，其中包含一个图像。

如何检测该元素是否正在查看/是否在浏览器窗口中？

【问题讨论】：

您是否在问如何跟踪浏览量并记录它们？你在问什么？
如何使用脚本来检测HTML元素是否正在被用户查看/是否在浏览器窗口中。
你已经说过了，所以你只是重新输入。如果页面只是一个带有图像的 div，那么如果用户在页面上，它将始终被用户查看
如果 div 比窗口本身低 600px，它不会被查看，只会被加载。

标签： javascript jquery html

【解决方案1】：

如果我理解正确，您想知道图像是否在视口中并且尚未滚动。在这种情况下，您需要获取视口和图像高度，获取图像的位置和文档的当前位置。如果您使用的是 jquery（我假设来自标签），您可以这样做：

var viewportHeight = $(window).height();
var imageOffset = $('img:first').offset().top;
var imageHeight = $('img:first').height;
var documentPosition = $(window).scrollTop();

var visibleArea = documentPosition + viewportHeight; //end of visible area
var imageArea = imageOffset + imageHeight;

if (documentPosition <= imageOffset && visibleArea >= imageArea) {
  //image is entirely visible
}

【讨论】：

【解决方案2】：

你可以试试Element ‘in view’ Event Plugin。

【讨论】：