Vue监听页面滚动触底事件

最新推荐文章于 2024-06-25 10:16:12 发布

暴富的im

最新推荐文章于 2024-06-25 10:16:12 发布

阅读量550

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_59626859/article/details/134139481

前端专栏收录该内容

74 篇文章

订阅专栏

文章介绍了如何在Vue模板中，通过在最外层div添加scroll事件监听器，实时检测页面滚动，当滚动到底部时触发特定操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接在需要监听的页面最外层div加监听事件

<template>
<div class="contain" @scroll="onScroll">

</div>
</template>

methods:{
 
 onScroll(e){

let scrollTop = e.target.scrollTop;
let scrollHeight = e.target.scrollHeight;
let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height);
let currentHeight = scrollTop + offsetHeight;
 if (currentHeight >= scrollHeight) {
      console.log('触底了')
     }

  }

}