使用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>位於底部。

如果您有很多列表項，那麼線性搜索可能不是您想要的，但您應該能夠在沒有太多努力的情況下解決這個問題。