vue中如何监听滚动条到底部-成都快上网建站

vue中如何监听滚动条到底部

本篇内容介绍了“vue中如何监听滚动条到底部”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

创新互联专注于永年企业网站建设,自适应网站建设,商城网站建设。永年网站建设公司,为永年等地区提供建站服务。全流程按需制作,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务

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中如何监听滚动条到底部”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


新闻名称:vue中如何监听滚动条到底部
当前网址:http://kswjz.com/article/pjihdp.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流