項目中，因為數據量過大，為提高頁面性能，采用頁面滑動 滾動條到底部的時候再進行數據請求分頁，這邊給大給個核心，結合vue的生命周期用純javascript寫的一個監聽函數

第一個我們需要知道幾個屬性值，判斷滾動條是否已經到達底部

滾動條到頂部的位置：scrollTop
當前窗口內容可視區：windowHeight
滾動條內容的總高度：scrollHeight

//這里是觸發頁面滾動事件函數 window.onscroll = function()｛...｝

判斷到底部的等式為: scrollTop+windowHeight=scrollHeight;

//這個方法可以放在vue的某個要用的生命周期里使用 //如mounted() ... window.onscroll = function(){//變量scrollTop是滾動條滾動時，距離頂部的距離var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;//變量windowHeight是可視區的高度var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;//變量scrollHeight是滾動條的總高度var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;//滾動條到底部的條件if(scrollTop+windowHeight == scrollHeight){//到了這個就可以進行業務邏輯加載后臺數據了console.log("到了底部");// window.onscroll = '' 用于解除綁定} }

總結

以上是生活随笔為你收集整理的纯js监听滚动条到底部（vue版）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。