使用jQuery在顶部和底部滚动div查找DOM元素

Question

我有一个包含列表项的滚动div。我有这个样板滚动事件定义

$("#scrollingDiv").scroll(function(e) { 

}); 

这里面滚动事件的功能，我怎么能弄清楚哪些元素是在当前可视区域的顶部和底部？

Answer 1

您可以尝试计算列表项目相对于滚动<div>的位置，然后扫描位置以查看哪些与<div>的scrollTop匹配。

像这样的东西可能：

var base = $('#scrollingDiv').offset().top; 
var offs = [ ]; 
$('li').each(function() { 
    var $this = $(this); 
    offs.push({ 
     offset: $this.offset().top - base, 
     height: $this.height() 
    }); 
}); 
$("#scrollingDiv").scroll(function() { 
    var y = this.scrollTop; 
    for(var i = 0; i < offs.length; ++i) { 
     if(y < offs[i].offset 
     || y > offs[i].offset + offs[i].height) 
      continue; 
     // Entry i is at the top so do things to it. 
     return; 
    } 
}); 

真人版（打开你的控制台请）：http://jsfiddle.net/ambiguous/yHH7C/

你可能会想与if的模糊性发挥得一些作品理智（ 1px可见几乎不会使元素成为最高的元素），但基本思想应该足够清晰。在#scrollingDiv的高度混合可以让您看到哪个<li>位于底部。

如果您有很多列表项，那么线性搜索可能不是您想要的，但您应该能够在没有太多努力的情况下解决这个问题。