三種方式實現滾動到底部加載更多

前端弟中弟，問題都是項目中遇到的，因此記錄了下來。

我的博客

目前學習Flutter還原豆瓣 ,以此深刻了解Flutter，求大佬們給個Star   ❤   ❀

github.com/jahnli/flut…

原生js實現思路

須要三個高度：scrollHeight（文檔內容實際高度，包括超出視窗的溢出部分）、scrollTop（滾動條滾動距離）、clientHeight（窗口可視範圍高度）。當 clientHeight + scrollTop >= scrollHeight 時，表示已經抵達內容的底部了，能夠加載更多內容。

// Js代碼
window.onscroll= function(){
    //文檔內容實際高度（包括超出視窗的溢出部分）
    var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
    //滾動條滾動距離
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    //窗口可視範圍高度
    var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight,document.body.clientHeight);
    
    if(clientHeight + scrollTop >= scrollHeight){
        console.log("===加載更多內容……===");
    }
}
複製代碼

Vue的實現方式

mounted() {
  // 監聽滾動
  window.addEventListener('scroll',this.handleScroll,true)
},

// 滾動操做
handleScroll(e){
  let dom = document.querySelector('.main_content')
  //文檔內容實際高度（包括超出視窗的溢出部分）
  let scrollHeight = Math.max(dom.scrollHeight, dom.scrollHeight);
  //滾動條滾動距離
  let scrollTop = e.target.scrollTop;
  //窗口可視範圍高度
  let clientHeight = dom.innerHeight || Math.min(dom.clientHeight,dom.clientHeight);
  if(clientHeight + scrollTop >= scrollHeight){
    if(this.pageSize > this.total ) return;
    this.pageSize += 10
    this._getArchives()
  }
},

// 銷燬監聽 (坑：移除監聽事件時加true不然銷燬不成功)
beforeDestroy(){
  window.removeEventListener("scroll",this.handleScroll,true)
}
複製代碼

jquery的實現方式

<script>
    $(window).on("resize scroll",function(){
             
        var windowHeight = $(window).height();//當前窗口的高度 
        var scrollTop = $(window).scrollTop();//當前滾動條從上往下滾動的距離 
        var docHeight = $(document).height(); //當前文檔的高度 
        console.log(scrollTop, windowHeight, docHeight);
        //當 滾動條距底部的距離 + 滾動條滾動的距離 >= 文檔的高度 - 窗口的高度 
        //換句話說：（滾動條滾動的距離 + 窗口的高度 = 文檔的高度） 這個是基本的公式 
        if (scrollTop + windowHeight >= docHeight) { 
            console.log("===加載更多數據===");
        }
    });
</script>
複製代碼