vue子组件监听滚动

背景

页面结构是一个父组件嵌套一个子组件,我在子组件中监听页面滚动,使用

window.addEventListener('scroll', scrollPage,true)

发现scrollPage一直没有触发,后来发现这个是子组件所以使用window.addEventListener无效,这时候需要将要滚动的部分设置overflow-y:scroll;height:100%的样式,子组件就可以监听到滚动,然后在滚动的元素上命名一个ref,最后在mounted中获取这个元素,给这个元素绑定监听事件就可以了

mounted () {
   let scrollView = this.$refs.scrollView
   scrollView.addEventListener('scroll', this.handleScroll, true)
}

点击按钮页面返回顶部

点击按钮触发backTop方法

let scrollView = this.$refs.scrollView
let timeTop = setInterval(() => {
   scrollView.scrollTop = scrollView.scrollTop - 50
   if (scrollView.scrollTop <= 0) {
      clearInterval(timeTop)
   }
})