如何判断DOM元素是否在当前视口中可见？ [英] How to tell if a DOM element is visible in the current viewport?

问题描述

有没有一种有效的方法来判断一个DOM元素（在HTML文档中）当前是否可见（出现在视口）？

Is there an efficient way to tell if a DOM element (in an HTML document) is currently visible (appears in the viewport)?

（关于Firefox的问题）

(The question regards Firefox)

推荐答案

更新：时间到了，我们的浏览器。 此技术不再推荐，您应该使用以下的@ Dan解决方案（ https://stackoverflow.com/ a / 7557433/5628 ）如果您不需要支持IE< 7。

Update: Time marches on and so have our browsers. This technique is no longer recommended and you should use @Dan's solution below (https://stackoverflow.com/a/7557433/5628) if you do not need to support IE<7.

原始解决方案（现已过时）：

这将检查元素是否在当前视口中完全可见：

This will check if the element is entirely visible in the current viewport:

function elementInViewport(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top >= window.pageYOffset &&
    left >= window.pageXOffset &&
    (top + height) <= (window.pageYOffset + window.innerHeight) &&
    (left + width) <= (window.pageXOffset + window.innerWidth)
  );
}

您可以简单地修改它，以确定元素的任何部分是否可见视口：

You could modify this simply to determine if any part of the element is visible in the viewport:

function elementInViewport2(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top < (window.pageYOffset + window.innerHeight) &&
    left < (window.pageXOffset + window.innerWidth) &&
    (top + height) > window.pageYOffset &&
    (left + width) > window.pageXOffset
  );
}

这篇关于如何判断DOM元素是否在当前视口中可见？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！