标签：
<!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); } } });
http://jsbin.com/xapeyopuhu/edit?html,css,js,console,output
标签：
原文地址：http://www.cnblogs.com/zyip/p/4851827.html
