在網頁中，我們會遇到很多在滾動條到底部的時候有數據正在加載的事件，那么怎樣用vue去實現這樣的內容呢？本篇只給出一個雛形，結合vue的生命周期用純javascript寫的一個監聽函數，后續操作數據庫的部分暫且不議。
1、怎樣用純js判斷滾動條是否到底部？
先了解幾個關鍵詞：
（1）滾動條到頂部的位置：scrollTop
（2）當前窗口內容可視區：windowHeight
（3）滾動條內容的總高度：scrollHeight
觸發監聽的函數是：
window.onscroll = function()｛...｝
判斷到底部的等式: scrollTop+windowHeight=scrollHeight;
2、主要函數代碼
created(){ 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("距頂部"+scrollTop+"可視區高度"+windowHeight+"滾動條總高度"+scrollHeight); } } }以上這篇vue 純js監聽滾動條到底部的實例講解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
