美文网首页
Vue ctrl+鼠标滚动事件,浏览器禁用与重写

Vue ctrl+鼠标滚动事件,浏览器禁用与重写

作者: 史梦辰 | 来源:发表于2021-12-27 16:46 被阅读0次
    // mounted监听
    mounted() {
        window.addEventListener('mousewheel', this.handleScroll, { passive: false })
      }
    

    注意要将passive设置为false,否则会报错,原理:
    https://blog.csdn.net/lijingshan34/article/details/88350456

    handleScroll(e){
          // 判断是不是按下ctrl键
          if(e.ctrlKey) {
            // 取消浏览器默认的放大缩小网页行为
            e.preventDefault()
            // 判断是向上滚动还是向下滚动
            if (e.deltaY > 0) {
              // 放大重写,业务代码
              this.maxus()
            } else {
              // 缩小重写,业务代码
              this.minus()
            }
          }
        }
    

    相关文章

      网友评论

          本文标题:Vue ctrl+鼠标滚动事件,浏览器禁用与重写

          本文链接:https://www.haomeiwen.com/subject/irvyqrtx.html