vue组件监听鼠标滚动数值

282 阅读1分钟

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)
    }