1

ユーザーがスクロールバーを右端までドラッグしたときにデータをロードしたい。基本的に、スクロールバーが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'));
    }
});

2つ目はディベンド用です

$('.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

減算は、ビューポートの下部がさらに 200px 上のポイントと比較されることを意味します。==にも変更されていることに注意してください>=。

于 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 に答える