jQuery mengesan sama ada bar skrol mencapai bottom_jquery

1. jQuery mengesan bahawa bar skrol tetingkap penyemak imbas mencapai bahagian bawah
jQuery mendapat kedudukan dan saiz fungsi berkaitan:
$(document).height() Dapatkan ketinggian keseluruhan halaman
$(window).height() Dapatkan ketinggian semasa bahagian halaman yang boleh dilihat oleh penyemak imbas. Saiz ini akan berubah apabila anda mengubah saiz tetingkap penyemak imbas, yang berbeza daripada dokumen
scrollTop() Mendapat offset elemen padanan berbanding bahagian atas bar skrol.
scrollLeft() Mendapat offset elemen padanan berbanding sebelah kiri bar skrol.
skrol([[data],fn]) Acara skrol dicetuskan apabila bar skrol berubah
jQuery mengesan apabila bar skrol mencapai kod bawah:

$(document).ready(function() {
  $(window).scroll(function() {
 
    if ($(document).scrollTop()<=0){
      alert("滚动条已经到达顶部为0");
    }
 
    if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
      alert("滚动条已经到达底部为" + $(document).scrollTop());
    }
  });
});

2. jQuery mengesan bahawa bar skrol dalam div mencapai bahagian bawah
Separuh pertama artikel memperkenalkan pengesanan jQuery terhadap bar skrol tetingkap pelayar yang mencapai bahagian bawah Sebenarnya, saya masih tidak memahami konsep scrollTop dan scrollHeight Biasanya bar skrol diletakkan dalam div.

Kesan bar skrol mencapai acara bawah dengan id scroll_div seperti berikut:

<div id="scroll_div" style="overflow-y:auto; overflow-x:hidden;margin:100px;height:500px;border:1px solid red">
      <div style="height:10000px">
        来自于www.jb51.net脚本之家<br>
        来自于www.jb51.net脚本之家<br>
        来自于www.jb51.net脚本之家<br>
      </div>
    </div>

Mula-mula anda perlu memahami beberapa konsep:
scrollHeight: Menunjukkan ketinggian yang bar skrol perlu ditatal, iaitu, div dalaman, 10000px
scrollTop: menunjukkan ketinggian bar skrol, yang mungkin lebih besar daripada div luar 500px
Maksudnya, ketinggian scrollDiv dan ketinggian maksimum scrollTop = scrollHeight
Jadi mengesan ketinggian bar skrol div dalam div adalah mudah:

$(document).ready(function() {
  $("#scroll_div").scroll(function(){
    var divHeight = $(this).height();
    var nScrollHeight = $(this)[0].scrollHeight;
    var nScrollTop = $(this)[0].scrollTop;
    $("#input1").val(nScrollHeight);
    $("#input2").val(nScrollTop);
    $("#input3").val(divHeight);
    if(nScrollTop + divHeight >= nScrollHeight) {
      alert("到达底部了");
    }
  });
});

Jika data dimuatkan secara tidak segerak, data tidak dimuatkan sepenuhnya dan permintaan pemuatan data halaman yang sama dilanggar, saya biasanya menambah bendera

$(document).ready(function() {
  var flag = false;
  $("#scroll_div").scroll(function(){
    
    if(flag){
      //数据加载中
      return false;
    }
    
    var divHeight = $(this).height();
    var nScrollHeight = $(this)[0].scrollHeight;
    var nScrollTop = $(this)[0].scrollTop;
    $("#input1").val(nScrollHeight);
    $("#input2").val(nScrollTop);
    $("#input3").val(divHeight);
    if(nScrollTop + divHeight >= nScrollHeight) {
      //请求数据
      flag = true;
      alert("到达底部了");
    }
  });
});