jQueryはスクロールバーがbottom_jqueryに到達したかどうかを検出します-jsチュートリアル-php.cn

jQueryはスクロールバーがbottom_jqueryに到達したかどうかを検出します

WBOY

リリース： 2016-05-16 15:25:35

オリジナル

1232 人が閲覧しました

1. jQuery はブラウザウィンドウのスクロールバーが最下部に到達したことを検出します
jQuery は位置とサイズを取得します 関連関数:
$(document).height() ページ全体の高さを取得します
$(window).height() ブラウザーが表示できるページの部分の現在の高さを取得します。このサイズはブラウザウィンドウのサイズを変更すると変更され、ドキュメントとは異なります
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. jQuery は div 内のスクロールバーが最下部に到達したことを検出します
記事の前半では、ブラウザウィンドウのスクロールバーが下部に到達することを jQuery が検出することを紹介しました。実際、スクロールバーは通常 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.jb51.net脚本之家<br>
        来自于www.jb51.net脚本之家<br>
        来自于www.jb51.net脚本之家<br>
      </div>
    </div>

ログイン後にコピー

まず、いくつかの概念を理解する必要があります。
scrollHeight: スクロールバーをスクロールする必要がある高さ、つまり内部 div、10000px
を示します。 scrollTop: スクロールバーの高さを示します。これは、外側の div 500px
よりも大きくなる可能性があります。つまり、scrollDivの高さ+scrollTopの最大高さ=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("到达底部了");
    }
  });
});

ログイン後にコピー