VUE中如何实现鼠标移动到某网页区域，屏蔽滚轮的功能

问题描述：

如图，这是一个用canvas库（fabric.js）生成的图像，用鼠标滚轮能使图像缩放。问题是用滚轮的同时，整个网页也会上下滚动。有没有办法让我鼠标停留在图像上滚动时，屏蔽网页的滚动。

我知道Vue有一个@scroll.prevent的写法，但是好像只能用在特定的组件上，如input.

如果用VUE不行的话，用原生js解决也行。

以下是滚轮实现canvas画布缩放的代码

  onMouseWheel(){
    // 滚动缩放画布大小
    this.canvas.on('mouse:wheel', (options) => {
      let zoom = (options.e.deltaY > 0 ? -0.1 : 0.1) + this.canvas.getZoom()
      // 最小为原来的1/10
      zoom = Math.max(0.1, zoom)
      // 最大是原来的3倍
      zoom = Math.min(5, zoom)
      // 在中心缩放
      const zoomPoint = new fabric.Point(this.canvas.width / 2, this.canvas.height / 2)
      this.canvas.zoomToPoint(zoomPoint, zoom)
    })
  }

——————————————————6月15日更新

贴出我最后实现的代码，唯一的缺点就是滚动条会消失

window.onload = ()=>{
  let mapcover = document.getElementById("mapcover");
  console.log('执行了')
  mapcover.onmouseout = ()=>{
    document.documentElement.style.overflow='auto';
  }
  mapcover.onmouseover = ()=>{
    document.documentElement.style.overflow='hidden';
  }
}

答

你可以试试给canvas绑定个mouseover和mouseout事件在这个里可以设置个禁用滚轮类似这样https://www.cnblogs.com/linjiangxian/p/11460930.html ，其他方法都会很麻烦，比如鼠标移动获取坐标，之类的

答

window.onload = ()=>{
  let mapcover = document.getElementById("mapcover");
  console.log('执行了')
  mapcover.onmouseout = ()=>{
    document.documentElement.style.overflow='auto';
  }
  mapcover.onmouseover = ()=>{
    document.documentElement.style.overflow='hidden';
  }
}
//唯一的缺点就是会使滚动条消失

VUE中如何实现鼠标移动到某网页区域，屏蔽滚轮的功能

相关推荐