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

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条回答 默认 最新

  • weixin_44058725
    已采纳

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

    点赞 评论
  • yang625624461
    yang625624461 2021-06-15 11:23
    window.onload = ()=>{
      let mapcover = document.getElementById("mapcover");
      console.log('执行了')
      mapcover.onmouseout = ()=>{
        document.documentElement.style.overflow='auto';
      }
      mapcover.onmouseover = ()=>{
        document.documentElement.style.overflow='hidden';
      }
    }
    //唯一的缺点就是会使滚动条消失
    点赞 评论

相关推荐