Vue中判断鼠标滚动方向

标签中监听鼠标滚动事件

@mousewheel = "mouseWheel"

根据事件 e 的 wheelDelta 和 detail 的正负来判断向上还是向下滚动

methods: {
    mouseWheel (e) {
      if (e.wheelDelta || e.detail) {
        if (e.wheelDelta > 0 || e.detail < 0) {     //当鼠标滚轮向上滚动时
          console.log("向上")
        }
        if (e.wheelDelta < 0 || e.detail > 0) {     //当鼠标滚轮向下滚动时
          console.log("向下")
        }
      }
    }
  }

弹窗中如何阻止背景主页面滚动？

需要在弹窗根标签中添加 .prevent 修饰符，阻止默认行为

<div @mousewheel.prevent> </div>

如果弹窗中内容需要滚动怎么办？

需要在弹窗内容标签中添加 .stop 修饰符 ，阻止事件冒泡

<div @mousewheel.stop> </div>