zoukankan html css js c++ java

接长龙

<!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;
  //st<t items[i]的上边界滚出可视区
  // t + 100 < st + ch 表示item[i]滚入可视区域100个像素
  if(st<t && t+ih-100<st+ch)
  {
    console.log(i+1);
  }
}



  


  
  
});

JS Bin on jsbin.com

http://jsbin.com/xapeyopuhu/edit?html,css,js,console,output