vue监听document的scroll事件

当前遇到了一个这样的业务场景:
当页面滚动距离大于指定距离,显示回到顶部的按钮,否则隐藏按钮;
项目构成:vue-cli + axios
要求:不使用jQuery,使用原生完成这个组件。

首先:MDN中对scroll事件的定义,可以发现其中的关键点element的scroll事件不冒泡, 但是document的defaultView的scroll事件冒泡document.defaultView指的是document的所关联的window对象,主要是在火狐上使用一些window的方法。

然后开始撸代码:
注意
①scroll触发 的频率较高,要使用函数去抖或函数节流
②兼容事件处理

initDom() {
            this.listenDocmentScroll();
        },
        listenDocmentScroll() {
            // 使用函数去抖创建执行函数
            let fn = this.Plum.debounce(() => {
                const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                // 如果滚动距离大于指定位置,显示图标,否则隐藏图标
                if (scrollTop > this.position) {
                    this.showComponent = true;
                } else {
                    this.showComponent = false;
                }
            });
            // 监听页面滚动事件
            this.Plum.addHandler(document, 'scroll', event => {
                fn();
            }, true);
        },

debounce是我封装的函数去抖函数,addHandler是添加兼容事件函数。

总结:刚开始,滚动事件总是没办法触发,所以我以为是vue声明周期的问题,所以就把事件放在mounted中:

mounted() {
        this.$nextTick(() => {
            this.initDom();
        })
    },

但是经过反复调试和思考,发现不对,因为document对象是全局的,一致都存在,后来发现是addEventListener的第三个参数不对,应该使用true,即滚动事件是捕获事件而不是冒泡事件。如果是给一个非全局的dom节点添加滚动事件,则可以使用我的代码,在mounted中使用$nextTick,确保dom已经渲染。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值