vue监听某一个元素是否滚动到底部

最新推荐文章于 2024-05-09 12:17:39 发布

self_challenge

最新推荐文章于 2024-05-09 12:17:39 发布

阅读量2.8k

点赞数 2

文章标签： vue javascript

本文链接：https://blog.csdn.net/self_challenge/article/details/106343895

版权

本文介绍如何在Vue项目中使用JavaScript实现对特定元素的滚动到底部事件监听，从而触发相应的功能，如加载更多数据。

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

<div class="roll" @scroll="scrollEvent"></div>
scrollEvent () {
  // 可存this指向
  const ts = this    
  document.querySelector('.roll').addEventListener('scroll', function () {
    // scrollHeight: 内容区域的总高度    clientHeight: 内容可视区域的高度     scrollTop: 滚动距离顶部的位置
    // 总高度减距离顶部的距离再减5判断是否小于可视区域的高度
    if (parseInt(this.scrollHeight - this.scrollTop - 5) < this.clientHeight) {
      console.log('到底部了')
      // 干你想干的事
  	}
  })
}