1

我想在用户将滚动条拖动到 rhw 结束时加载数据。基本上，当滚动条非常接近 div 或页面的末尾时，在触摸 div 或页面的末尾之前，我希望加载数据。

我在这里检测滚动条已到达 div 或页面末尾的逻辑如下：

第一个是页面结束

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        var new_div = '<div class="new_block"></div>';
        $('.main_content').append(new_div.load('/path/to/script.php'));
    }
});

第二个是潜水

$('.some_element').bind('scroll', function(){
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight){
        var new_div = '<div class="new_block"></div>';
        $('.main_content').append(new_div.load('/path/to/script.php'));
    }
});

那么，我是否需要在上面的代码中进行修改，以使我的例程能够在滚动条非常接近页面或 div 端之前调用？

4

2 回答 2

2

更改$(window).scrollTop() + $(window).height() == $(document).height()为

$(window).scrollTop() + $(window).height() >= $(document).height() - 200

减法意味着将视口的底部与更上方 200 像素的点进行比较。请注意，==也更改>=为。

于 2012-04-11T07:28:45.893 回答
1

我使用 nearBottomOfPage() 来实现这一点。我的完整代码如下，但我认为您只需要检查此方法的逻辑。

<script type="text/javascript">
  var page = 1;

  (function() {

    function nearBottomOfPage() {
      return $(".normal_url_block").scrollTop() > $(".normal_url_block #result").height() - $(".normal_url_block").height() - 100;
    }

    function finish() {
      finished = true;
    }

    $(".normal_url_block").scroll(function(){

      if (loading) {
        return;
      }

      if(nearBottomOfPage() && !finished) {
        loading=true;
        jQuery("#all_discussions_loader").show();
        page++;
        var current_value= jQuery("#discussion_sorting").val();
        var current_order= jQuery("#order_by").val();
        jQuery.get("load_discussion_as_per_time/"+current_value+"?order_by="+current_order+"&page="+page,function(data){
          jQuery("#result").append(data);
          if(data.length==0)
          {
            finished = true;
          }
          loading=false;
          jQuery("#all_discussions_loader").hide();
        });

      }
    });
  }());
</script>
于 2012-04-11T07:18:05.163 回答