在網頁中，我們會遇到很多在滾動條到底部的時候有數據正在加載的事件，那么怎樣用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監聽滾動條到底部的實例講解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。