yang625624461
2021-06-14 11:05
采纳率: 100%
浏览 295
已采纳

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';
  }
}
  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

2条回答 默认 最新

相关推荐 更多相似问题