vue滚动

1、监听滚动事件

利用VUE写一个在控制台打印当前的scrollTop,

首先，在mounted钩子中给window添加一个滚动滚动监听事件，

mounted () {
window.addEventListener('scroll', this.handleScroll)
},
然后在方法中，添加这个handleScroll方法

handleScroll () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
console.log(scrollTop)
},
2、监听元素到顶部的距离  并判断滚动的距离如果大于了元素到顶部的距离时，设置searchBar为true,否则就是false

handleScroll () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
let offsetTop = document.querySelector('#searchBar').offsetTop
scrollTop > offsetTop ? this.searchBarFixed = true : this.searchBarFixed = false
},
注意，如果离开该页面需要移除这个监听的事件，不然会报错。

destroyed () {
window.removeEventListener('scroll', this.handleScroll)
},

----------------------------

本文转自梦想代码博客51CTO博客

如需转载，请联系作者授权

原文链接：https://blog.51cto.com/13507333/2352795