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

Question

---

注意：这是 关于display:none;的问题。

---

我在各种容器中有不同的元素，设置为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/