Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="item1 item">111
    </div>
        <div class="item2 item">222
    </div>
        <div class="item3 item">333
    </div>
        <div class="item4 item">444
    </div>
        <div class="item5 item">555
    </div>
  </div>
</body>
</html>
 
.container
{
  border:1px solid red;
  height:200px;
  overflow:scroll;
  padding:0px 0px 0px 0px;
  width:300px;
  margin:20px auto auto;
  position:relative;
  
}
.item
{
  width:80%;
  border:1px solid black;
  margin:auto auto auto ;
  margin-top:10px;
  margin-bottom:0px;
  height:150px;
  
}
 
var container=document.querySelector('.container');
var item1=document.querySelector('.item1');
var items=document.querySelectorAll ('.item');
container.addEventListener("scroll", function(e){
 
  var st=container.scrollTop;
  var ch=container.offsetHeight;  
for(var i=0;i<items.length;i++)
{
  var ih=items[i].offsetHeight;
  var t = items[i].offsetTop;
  if(st<t && t+ih-100<st+ch)
  {
    console.log(i+1);
  }
}
  
  
  
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x