vue 纯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);
    } 
  }
 }

以上这篇vue 纯js监听滚动条到底部的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。