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

问题描述：

我有一个包含列表项的滚动div。我有这个样板滚动事件定义使用jQuery在顶部和底部滚动div查找DOM元素

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

});

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

也许你可以遍历列出的项目，检查它们是否可见并创建一个数组。然后采取第一个和最后一个。看看这个http://stackoverflow.com/questions/487073/jquery-check-if-element-is-visible-after-scroling，你可以使用它作为一个函数，如果你想，然后遍历你的列表并检查每个元件。 – Matt

答

您可以尝试计算列表项目相对于滚动<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>位于底部。

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

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

相关推荐