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

Question

我有一个包含列表项的滚动 div。我在此滚动事件函数内部定义了

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

});

此样板滚动事件，如何确定哪些元素位于当前可见区域的顶部和底部？

Answer 1

您可以尝试计算列表项相对于滚动

的位置，然后扫描位置以查看哪些位置与 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/ambigously/yHH7C/

您可能希望利用 if 的模糊性来获得一些可以合理工作的东西（1px 可见很难使元素成为顶部元素），但基本思想应该足够清晰。混合 #scrollingDiv 的高度可以让您看到哪个

位于底部。

如果您有很多列表项，那么线性搜索可能不是您想要的，但您应该能够轻松解决这个问题。