需要用于无限滚动jquery的小逻辑

Question

我想在用户将滚动条拖动到rhw end时加载数据。基本上，当滚动条非常接近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结尾之前调用吗？

Answer 1

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

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

减法意味着将视口的底部与进一步向上的点200px进行比较。请注意，==也会更改为>=。

Answer 2

我使用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>