jqueryでスクロールバーが一番下に到達したかどうかを確認する方法-jsチュートリアル-php.cn

jqueryでスクロールバーが一番下に到達したかどうかを確認する方法

coldplay.xixi

リリース： 2023-01-04 09:37:02

オリジナル

3829 人が閲覧しました

jQuery がスクロールバーが最下部に到達したかどうかを判断する方法: 1. [scrollTop()] メソッドを使用すると、jQuery はブラウザウィンドウのスクロールバーが最下部に到達したことを検出します; 2. [scroll_div] を使用して、移動バーが最下位に到達した場合。

jqueryでスクロールバーが一番下に到達したかどうかを確認する方法

#このチュートリアルの動作環境: Windows7 システム、jquery3.2.1 バージョン、thinkpad t480 コンピューター。

jQuery がスクロールバーが最下部に到達したかどうかを判断する方法:

1. jQuery はブラウザウィンドウのスクロールバーが最下部に到達したことを検出します

jQuery 位置とサイズ関連の関数を取得します:

$(document).height() ページ全体の高さを取得します
$(window).height() ブラウザが表示できるページ部分の現在の高さを取得します。このサイズは、ブラウザウィンドウのサイズを変更すると変更されます。これは document とは異なります。
scrollTop() 一致する要素の上部を基準としたオフセットを取得します。スクロール・バー。
scrollLeft() スクロールバーの左側を基準とした一致する要素のオフセットを取得します。
scroll([[data],fn]) スクロールバーが変化するとスクロールイベントがトリガーされます

スクロールバーが一番下に到達していることを検出する jQuery コード:

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

ログイン後にコピー

2. div 内のスクロールバーが一番下に到達していることを検出する jQuery

前半では、スクロールバーを検出する jQuery を紹介しました。ブラウザウィンドウのスクロールバーが一番下まで到達していますが、実際のところ、scrollTopとscrollHeightの概念がまだ理解できていません。通常、スクロールバーはdivに配置されます。

次の検出 ID は

scroll_div スクロールバーが一番下のイベントに到達します:

<div id="scroll_div" style="overflow-y:auto; overflow-x:hidden;margin:100px;height:500px;border:1px solid red">
      <div style="height:10000px">
        来自于www.php中文网.cn<br>
        来自于www.php中文网.cn<br>
        来自于www.php中文网.cn<br>
      </div>
    </div>

ログイン後にコピー

まず、いくつかの概念を理解する必要があります:

scrollHeight: スクロールする必要があるスクロールバー、つまり内部 div の高さを示します。10000px
scrollTop: スクロールする必要があるスクロールバーの高さを示します。これは、外側の div 500px

よりも大きくなる可能性があります。つまり、scrollDiv の高さが最大の高さになります。 ofscrollTop =scrollHeight

したがって、div 内の div スクロールバーの高さを検出するのは簡単です。

$(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("到达底部了");
    }
  });
});

ログイン後にコピー

データが非同期でロードされる場合、データは完全にはロードされず、同じページのデータ読み込みリクエストが違反されている場合、通常はフラグを追加します

$(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("到达底部了");
    }
  });
});

ログイン後にコピー