javaScript 與 jquery 滾動條觸底實現

阿新 • • 發佈：2021-10-14

方法事件獲取

/**
 * jq 獲取函式
 */
$(window).height() 　              //瀏覽器時下視窗可視區域高度   
$(document).height()　           //瀏覽器時下視窗文件的高度   
$(document.body).height()　　　　　　//瀏覽器時下視窗文件body的高度   
$(document.body).outerHeight(true)　//瀏覽器時下視窗文件body的總高度 包括border padding margin   
$(window).width() 　   //瀏覽器時下視窗可視區域寬度   
$(document).width()   // 
瀏覽器時下視窗文件對於象寬度   
$(document.body).width()　　　　　　//瀏覽器時下視窗文件body的高度   
$(document.body).outerWidth(true)　//瀏覽器時下視窗文件body的總寬度 包括border padding  



/**
 * js 獲取函式
 */

 HTML精確定位:  //scrollLeft,scrollWidth,clientWidth,offsetWidth   
 scrollHeight: //獲取物件的滾動高度。   
 scrollLeft: //設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離   
 scrollTop:  // 
設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離   
 scrollWidth: //獲取物件的滾動寬度   
 offsetHeight://獲取物件相對於版面或由父座標 offsetParent 屬性指定的父座標的高度   
 offsetLeft: //獲取物件相對於版面或由 offsetPsarent 屬性指定的父座標的計算左側位置   
 offsetTop:  //獲取物件相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置   
 event.clientX //相對文件的水平座標   
 event.clientY //相對文件的垂直座標   
 event.offsetX // 
相對容器的水平座標   
 event.offsetY //相對容器的垂直座標   
 document.documentElement.scrollTop// 垂直方向滾動的值   
 event.clientX+document.documentElement.scrollTop //相對文件的水平座標+垂直方向滾動的量

原生JavaScript 獲取滾動條觸底方法

/**
 *  原生JavaScript 獲取滾動條 觸底方法
 */

window.onscroll = function () {
    // 獲取三高
    var wHeight = document.documentElement.clientHeight; //視窗高度
    var sHeight = document.documentElement.scrollTop || document.body.scrollTop;//滾動條高度
    var dHeight = document.documentElement.scrollHeight;//文件高度
    //   console.log(wHeight);
    //   console.log(sHeight);
    //   console.log(dHeight);
    if (wHeight + sHeight == dHeight) {
         //寫邏輯的地方
    }
}

jq 獲取滾動條觸底方法

/**
 * jq 獲取滾動條 觸底 方法
 */
$(window).scroll(function () {
    var scrollTop = $(this).scrollTop();  //當前滾動條
    var scrollHeight = $(document).height();  //內容可視區域的高度。
    var windowHeight = $(this).height();   //當前的高度。
    // console.log(scrollTop + windowHeight == scrollHeight)
    if (scrollTop + windowHeight == scrollHeight) {   //滾動條加可視視窗  ==  當前視窗  就觸發
        //寫邏輯的地方
    }
  });

自定義div 滾動條觸底方法

/**
 * 自定義div 滾動條 觸底 方法 
 */

// HTML 部分
<div id='scrilname' style="width: 100px;height: 50px; overflow: hidden; overflow-y: auto;">
     1236958  1236958  1236958  1236958  1236958  1236958  1236958  1236958  1236958  1236958  1236958  1236958  1236958  1236958
</div>

//js 部分

var scrilname = document.getElementById('scrilname');
scrilname.onscroll = function(){
    if(scrilname.scrollHeight -  scrilname.clientHeight == scrilname.scrollTop){
       //寫邏輯的地方
    }
}