VUE监听滚动事件

2,333 阅读1分钟

前言

今天想做一个效果,当页面滚动到一定距离的时候,图标出现。但是发现用window.addEventListener('scroll',event)竟然不生效,网上搜索了好久也没解决。 到各种尝试之后发现这个方法有效,但是还是不清楚原因是什么,哎呦脑瓜子疼~

解决

直接上代码

 mounted() {
        this.box = this.$refs.surveyMainRef  
        this.box.addEventListener('scroll', this.handleScroll)
    },
    destroyed() {
        window.removeEventListener('scroll', this.handleScroll)
    },
    methods: {
        handleScroll() {
            var scrollTop = this.box.pageYOffset || this.box.scrollTop || 0
            console.log(scrollTop, 'scrollTop')
            if (scrollTop > 300) {
                this.isShowToTop = true
            } else {
                this.isShowToTop = false
            }
        },
    }

哪个滚动就监听哪个元素的滚动事件, 在浏览器上可以看到有效果