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

Question

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

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

});

在这个滚动事件函数中，我如何找出哪些元素位于当前可见区域的顶部和底部？

Answer 1

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

也许是这样的:

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>在底部。

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