如何使用jquery检查元素是否在用户的视图中

Question

div我的窗户里有一个非常大的拖拉机.这个div窗口较小.

<div id="draggable-area" style="width:500px;height:500px;overflow:hidden">
 <div id="draggable" style="width:5000px;height:5000px">
     <ul>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         ....
     </ul>
  </div>
</div>  

我怎么知道li元素在用户视口中是否可见(我的意思是真的可见,而不是在溢出区域)？

Answer 1

要检查元素是否在当前的veiwport中:

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

(来源)

对于更强大的方法,我建议使用Viewport选择器,它允许您只做:

$("#elem:in-viewport")

Answer 2

看看这个插件

它让您可以选择执行以下选择器

$(":in-viewport")
$(":below-the-fold")
$(":above-the-top")
$(":left-of-screen")
$(":right-of-screen")