javascript - jquery中的滚动绑定(bind)问题

Question

我有一个<div>标签 ID page在 ajax 调用 div 之后标签填充了“n”个 <li>元素。当我滚动到 div ( #page ) 的末尾时，我需要添加更多 <li>我无法使用以下代码。可以通过委托(delegate)来完成吗？

我的代码:

$(document).ready(function(){
    $("#page").bind("scroll",function(e){
            if($(this)[0].scrollHeight - $(this).scrollTop() < $(this).outerHeight())
            { 
               //End of scroll ;ajax data places here
            }
    });
});

Answer 1

为什么你不能用该代码来做到这一点？据我了解，你想绑定(bind)到卷轴。我发现可能存在的问题是您正在绑定(bind) scroll在你的 div 上。你的div设置了overflow:scroll吗？

如果是(或者如果您更改界限以便使用窗口并进行不同的计算)，您应该能够执行以下操作:

$(document).ready(function(){
    $("#page").bind("scroll",function(e){
            if($(this)[0].scrollHeight - $(this).scrollTop() < $(this).outerHeight())
            { 
               $(this).append("<li></li><li></li><li></li><li></li>");
            }
    });
});

或者，如果您此时正在调用从服务器获取数据:

$(document).ready(function(){
    $("#page").bind("scroll",function(e){
            if($(this)[0].scrollHeight - $(this).scrollTop() < $(this).outerHeight())
            { 
               $.ajax({
                   url: url
                   context: this, // used so that in success this is your div
                   dataType:html,
                   success: function(data) {
                      $(this).append(data);
                   }
               });
            }
    });
});

这里的关键是确保将滚动绑定(bind)到它可以绑定(bind)的元素。