vue滚动触底事件

最新推荐文章于 2024-05-28 09:49:24 发布

plainYzk

最新推荐文章于 2024-05-28 09:49:24 发布

阅读量784

点赞数

文章标签： vue javascript Powered by 金山文档

本文链接：https://blog.csdn.net/AsiaLuGuanWang/article/details/129498717

版权

该文章介绍了如何在JavaScript中监听HTML元素的滚动事件。通过在<div>元素上添加事件监听器，当用户滚动时触发handleScroll方法。此方法计算滚动位置、视口高度和总高度，判断是否已到达底部，实现动态加载内容的功能。

摘要由CSDN通过智能技术生成

html部分:

<div ref="scrollIdRef" id="scrollId"></div>

js部分:

  mounted() {
    let that = this;
    document
      .getElementById("scrollId")
      .addEventListener("scroll", that.handleScroll, true);
    },
   methods:{
       handleScroll(e){
          let scrollTop = e.target.scrollTop; //滑入屏幕滚动条滚动时，距离顶部的距离
          let windowHeitht = e.target.clientHeight; //能看到的页面的高度
          let scrollHeight = e.target.scrollHeight; //监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）
          let total = scrollTop + windowHeitht;
          this.loddingVisible = true;
          if (total == scrollHeight) {
            console.log("到达底部了");
           }else{
             console.log("还未到底");   
           }
        }
   }