有没有一种有效的方法来判断DOM元素(在HTML文档中)当前是否可见(显示在视口中)？

(问题以Firefox为准)

解决方案

取决于可见的含义。如果意思是当前显示在页面上，并给出滚动位置，则可以根据元素y偏移量和当前滚动位置进行计算。

更新：时间在前进，我们的浏览器也在前进。不再推荐使用此技术，如果不需要支持IE <7，则应使用下面的@Dan解决方案(https://stackoverflow.com/a/7557433/5628)。

原始解决方案(现已过时)：

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

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)
  );
}

我们可以简单地对其进行修改，以确定元素的任何部分在视口中是否可见：

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
  );
}

有一个叫做inview的jQuery插件可以完成这项工作