jquery如何判斷捲軸是否到底部-js教程-PHP中文網

jquery如何判斷捲軸是否到底部

coldplay.xixi

發布： 2023-01-04 09:37:02

原創

3760 人瀏覽過

jquery判斷捲軸是否到底部的方法：1、使用【scrollTop()】方法，jQuery偵測瀏覽器window捲軸到達底部；2、使用【scroll_div】偵測動條到達底部事件。

jquery如何判斷捲軸是否到底部

本教學操作環境：windows7系統、jquery3.2.1版本、thinkpad t480電腦。

jquery判斷捲軸是否到底部的方法：

一、jQuery偵測瀏覽器window捲軸到達底部

jQuery取得位置和尺寸相關函數：

$(document).height() 取得整個頁面的高度
#$(window).height() 取得目前也就是瀏覽器所能看到的頁面的那部分的高度。這個大小在你縮放瀏覽器視窗大小時會改變，與document是不一樣的
#scrollTop() 取得符合元素相對捲軸頂部的偏移。
scrollLeft() 取得符合元素相對捲軸左側的偏移。
scroll([[data],fn]) 當捲軸發生變化時觸犯scroll事件

jQuery偵測捲軸到達底部程式碼：

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

登入後複製

二、jQuery偵測div中捲軸到達底部

上半篇介紹了jQuery偵測瀏覽器window捲軸到達底部，其實還不懂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的高度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("到达底部了");
    }
  });
});

登入後複製

如果是異步加載數據，數據沒加載完，又觸犯了同一頁的數據加載請求，我通常是加一個flag

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

登入後複製