jquery - jQuery：测试元素是否在屏幕上可见

Question

---

注意：这不是关于display:none;.

---

我在各种容器中有不同的元素，它们是 set overflow:auto;。我想测试浏览器中是否可以看到任何给定的元素。

精度：

• 我假设（阅读“我不在乎”）顶部没有浮动的绝对元素
• 容器可能是绝对的
• 该元素可能部分可见

此函数将在window（或任何可滚动的）滚动事件上调用，以检查元素是否在视口中消失或重新出现，并且观察到的元素可能位于可滚动的 DIV 内。

推广这种验证是否需要做太多工作？

Answer 1

如果元素在指定容器中可见，这将返回 true：

function isVisable( element, container ){

  var elementTop = $(element).offset().top,
      elementHeight = $(element).height(),
      containerTop = $(container).offset().top,
      containerHeight = $(container).height();

  return ((((elementTop - containerTop) + elementHeight) > 0)
         && ((elementTop - containerTop) < containerHeight));
}

http://jsfiddle.net/MPuDW/