Count divs in outside window height position

Question

do you know if there is a way in jquery/javascript to count the divs outside window screen height?

like the image, in the green area?

Thank you in advance

Try using `$(':offscreen');` like in this example https://stackoverflow.com/questions/8897289/how-to-check-if-an-element-is-off-screen — Mojo Allmighty, Mar 15 '18 at 11:22
@MojoAllmighty apparently, it return only a boolean value based on specific div or whole page, i need to have a number who count specific divs only when divs are offscreen in bottom — Pds Ink, Mar 15 '18 at 11:30

score 0 · Accepted Answer · answered Mar 15 '18 at 11:48

I have created sample snippet taken reference How to check if an element is off-screen mentioned by Mojo in comment

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>

Count divs in outside window height position

1 Answers1