純js監聽滾動條到底部

在網頁中，我們會遇到很多在滾動條到底部的時候有數據正在加載的事件，那么怎樣用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);
              }   
        }
   }

---------------------
作者：ColourfulTiger
來源：CSDN
原文：https://blog.csdn.net/colourfultiger/article/details/80708873
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！