vue中滚动条冒泡踩过的一些坑 document.getElementById 为null

Vue中阻止滚动条冒泡,在父元素中加上一句话就可以了!不需要写一大堆方法

@mousewheel.stop

一句话阻止滚动条冒泡:

<div class="box" @mousewheel.stop>div>

---

解决如题问题:
首先这是一个原生一些的滚动条冒泡问题,
其次,标题里面写了document.getElementById, 实际上vue中更推荐使用 ref

<div class="xxx" ref="xxx" ></div>

let xxx = this.$refs.xxx

滚动条冒泡方法是这样的:

    let con = this.$refs.xxx
    //是否是firefox浏览器,如果是ff就绑定DOMMouseScroll事件，其他浏览器就用onmousewheel事件触发
    let firefox = navigator.userAgent.indexOf('Firefox') != -1
    console.log("clause",con);
    console.log("firefox",firefox);
    if (firefox) {
      con.addEventListener('DOMMouseScroll', this.MouseWheel, false)
    } else {
      console.log('鼠标滚动事件监听')
      con.onmousewheel = this.MouseWheel
    }

然而!!
这里面的 this.$refs.xxx 怎么也找不到元素,一直是undifined (我十分确定div中加入了ref)
document.getElementById 也找不到该元素,一直是null

结果最后发现,因为存在一个v-if :

<div class="xxx" ref="xxx" v-if="status">

把 v-if 改成 v-show ! 问题解决!

<div class="xxx" ref="xxx" v-show="status">

于是滚动条冒泡的问题也解决了

简单分析一下:
这个问题本质是一个dom渲染与生命周期的问题, 这个滚动条存在于弹窗组件中,而这个弹窗组件早在打开弹窗之前就已经渲染了,所以在渲染之前添加滚动事件监听器肯定是加不上的.
v-show会渲染dom节点,只是 css中操作为 display:none

这是一个综合性的问题,在项目开发中,弹窗的弹出方式与节点渲染时机都不尽相同, 我这个情况也是因为页面为多人开发,我也通过反复排查才搞定, 总体来说问题不难, 希望给小伙伴们一点启发