<!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
时间： 2024-10-10 01:23:39