如何检测html元素是否在浏览器窗口中？

Question

  

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

有一个HTML页面只有一个包含图像的div。

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

Answer 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
}

Answer 2

您可以尝试Element ‘in view’ Event Plugin。