Mac端Shift+鼠标滚轮在浏览器中无法触发水平滚动的问题排查

核心原因是Mac系统浏览器对无滚动能力的元素，会系统级拦截Shift + 鼠标滚轮事件：

• 当元素没有滚动条（即overflow为visible或内容未超出容器），Mac上的Chrome/Firefox/Safari会直接把Shift + 鼠标滚轮解释为系统级水平滚动指令，不会将Shift按键状态传递给JS的滚轮事件处理器，导致代码检测不到Shift按下。
• 当元素有滚动条（内容超出容器、overflow设为auto/scroll），浏览器会把滚轮事件优先交给元素的JS逻辑处理，此时就能正常检测到Shift按键状态——这也是你第二个测试用例有效的原因。
• Finder作为系统原生应用，直接遵循Mac输入逻辑，不受浏览器的事件拦截规则限制，因此能正常响应操作。

修复建议 #

1. 给画布容器添加隐藏的滚动能力：
   即使不需要显示滚动条，也可以给容器设置滚动属性，再通过CSS隐藏滚动条，让浏览器保留事件传递逻辑：

.canvas-container {
  overflow: scroll;
}
/* 隐藏各浏览器滚动条 */
.canvas-container::-webkit-scrollbar {
  display: none;
}
.canvas-container {
  -ms-overflow-style: none;  /* IE/Edge */
  scrollbar-width: none;  /* Firefox */
}

2. 直接监听水平滚动事件：
   绕过Shift按键检测，直接通过wheel事件的deltaX值判断水平滚动行为（Mac系统会把Shift + 滚轮转换为deltaX非零的事件）：

canvasContainer.addEventListener('wheel', (e) => {
  if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
    e.preventDefault(); // 阻止默认滚动行为
    // 此处编写你的画布水平滚动逻辑
  }
});

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