vue子组件无法监听鼠标滚动数值
只能在父组件上用 window.addEventListener('mousewheel', this.handleScroll, true)监听
//防止多次触发一个事件,只允许在事件段内触发一次
debounce(func, wait) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args)
}, wait);
}
}
//判断滚动方向
handleScroll(e){
let direction = e.deltaY > 0 ? 'down' : 'up'
if (direction === 'down') {
this.headTop = -80
} else if (direction === 'up') {
this.headTop = 0
}
},
// 监听鼠标滚轮滚动数值
watchScroll () {
this.scroll = document.documentElement.scrollTop ||
document.body.scrollTop
}
mounted () {
//监听鼠标滚动事件
window.addEventListener('mousewheel', this.handleScroll, false)||
window.addEventListener("DOMMouseScroll",this.handleScroll,false)
window.addEventListener('scroll', this.watchScroll, true)
}
//移除监听事件
beforeDestroy () {
window.removeEventListener("scroll", this.watchScroll)
window.removeEventListener('mousewheel',this.handleScroll)
}