如何强制鼠标滚轮事件仅作用于BabylonJS渲染的Canvas画布

这种情况确实挺闹心的——明明只想缩放3D场景，结果页面跟着滚走了。核心思路就是在Canvas元素上拦截滚轮事件，不让它触发页面的默认滚动行为，具体可以这么做：

• 首先获取到BabylonJS渲染用的Canvas元素，用引擎自带的方法比手动找DOM更稳妥：

  const canvas = engine.getRenderingCanvas();
  

• 给这个Canvas添加wheel事件监听器，在回调里阻止默认行为和事件冒泡：

  canvas.addEventListener('wheel', (event) => {
    // 阻止浏览器默认的页面滚动动作
    event.preventDefault();
    // 不让事件往上传递到文档或其他父元素
    event.stopPropagation();
  }, { passive: false });
  

  这里必须注意{ passive: false }这个选项——现代浏览器默认会把wheel事件的passive设为true，这时候调用preventDefault()会失效，所以得显式关闭这个设置。

• 最后确认你的ArcRotateCamera已经开启了滚轮缩放（默认是开启的，但加一句更保险）：

  camera.useMouseWheel = true;
  

这样设置后，鼠标在Canvas区域滚动时，只会触发BabylonJS相机的缩放，页面不会跟着动；鼠标在其他HTML内容上滚动时，页面依然正常滚动，完全不影响其他交互。

内容的提问来源于stack exchange，提问作者Ruediger Jungbeck