Vue · scroll：监听滚动

梦想退休的许小姐

已于 2023-04-23 11:45:31 修改

阅读量6.2k

点赞数 1

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

于 2021-10-20 19:28:18 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42091247/article/details/120871899

版权

Vue 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了在Vue.js应用中如何监听页面滚动和特定元素滚动的实现方法。在组件的mounted钩子中添加窗口滚动事件监听，并定义scrollToTop方法记录滚动位置。同时，展示了如何在具有固定高度的元素上监听滚动事件，通过handleScroll方法获取滚动距离并在底部触发特定操作。这些技巧对于优化用户体验和实现滚动加载等场景非常实用。

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

滚动

监听页面滚动

在mounted中进行监听滚动：

mounted () {
    window.addEventListener('scroll', this.scrollToTop)
},

在方法中定义监听滚动执行的方法：

scrollToTop() {
  　　var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  　　console.log(scrollTop)
},

监听某元素滚动

tips：需要监听的这个元素需要拥有固定的高度

vue

<div ref="scrollContainer" @scroll="handleScroll" ></div>

handleScroll () {
	  let scrolled =this.$refs.scrollContainer.scrollTop;
	        console.log(scrolled)
	  //滚动条触发事件
   console.log(e)
   if (e.srcElement.scrollTop + e.srcElement.clientHeight == e.srcElement.scrollHeight ) {
       console.log("嘿嘿我在底部触发了")
   }

},