在窗外高度位置计算div

Question

你知道jquery / javascript中是否有办法 计算窗口屏幕高度以外的div？

喜欢图片，绿色区域 ？

提前谢谢

Answer 1

我已在评论中创建了Mojo提及的参考代码参考How to check if an element is off-screen

jQuery.expr.filters.offscreen = function(el) {
  var rect = el.getBoundingClientRect();
  return (
           (rect.x + rect.width) < 0 
             || (rect.y + rect.height) < 0
             || (rect.x > window.innerWidth || rect.y > window.innerHeight)
         );
};


function checkOutsideDiv(){
	var allEl = $('.common-class');
  allEl.each(function(i, el){
  	console.log($(el).is(':offscreen'));
  });
}

.wrap{
  padding:20px;
  border:dotted 2px red;
  width:100%;
  float:left;
}

.common-class{
  width:40%;
  height:200px;
  line-height:200px;
  border:1px dashed green;
  float:left;
  margin:5px;
  text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" onclick="checkOutsideDiv()">
Check
</button>

<div class="wrap">
  <div class="common-class"> 1  </div>
  <div class="common-class"> 2  </div>
  <div class="common-class"> 2  </div>
  <div class="common-class"> 4  </div>
  <div class="common-class"> 5  </div>
  <div class="common-class"> 6  </div>
  <div class="common-class"> 7  </div>
  <div class="common-class"> 8  </div>
  <div class="common-class"> 9  </div>
  <div class="common-class"> 10  </div>
  <div class="common-class"> 11  </div>
  <div class="common-class"> 12  </div>
  <div class="common-class"> 13  </div>
  <div class="common-class"> 14  </div>
  <div class="common-class"> 15  </div>
</div>