Mac触控板横向滚动时如何阻止页面前进后退导航？

我太懂这个糟心的问题了——用Mac触控板双指左右滑的时候，本来只是想横向滚动页面，结果不小心触发了浏览器的前进/后退，而且常规的wheel事件拦截还不管用。这是因为Mac上的浏览器对触控板横向手势有默认的导航行为，优先级还挺高，咱们得针对性地调整拦截逻辑。

下面给你几个经过验证的解决方案：

1. 精准拦截横向滚动的Wheel事件 #

只在检测到明显的横向滚动时阻止默认行为，避免影响正常的纵向滚动：

container.addEventListener('wheel', function(ev) {
  // 判断是否为横向滚动：deltaX绝对值大于deltaY，且超过阈值（过滤微小误触）
  if (Math.abs(ev.deltaX) > Math.abs(ev.deltaY) && Math.abs(ev.deltaX) > 10) {
    ev.preventDefault();
    ev.stopPropagation();
  }
}, { passive: false, capture: true });

⚠️ 重点：passive: false必须设置，否则浏览器会忽略preventDefault()调用——这很可能是你之前拦截无效的核心原因之一。

2. 覆盖多浏览器的滚动事件类型 #

不同浏览器对触控板滚动的事件触发有差异，同时监听wheel、mousewheel和DOMMouseScroll（适配旧版Firefox）：

function handleHorizontalScroll(event) {
  // 检测横向滚动信号，兼容不同浏览器的属性
  const scrollX = event.wheelDeltaX || event.deltaX;
  if (Math.abs(scrollX) > 0) {
    event.preventDefault();
    event.stopPropagation();
    return false;
  }
}

// 给目标容器绑定所有相关事件，局部失效的话可以换成document/window
const target = container || document;
target.addEventListener('wheel', handleHorizontalScroll, { passive: false, capture: true });
target.addEventListener('mousewheel', handleHorizontalScroll, { passive: false, capture: true });
target.addEventListener('DOMMouseScroll', handleHorizontalScroll, { passive: false, capture: true });

3. Safari专属的手势拦截 #

Safari对触控板手势的处理比较特殊，可以用gesturechange事件专门拦截横向导航手势：

document.addEventListener('gesturechange', function(event) {
  // 过滤缩放/旋转手势，只拦截纯横向滑动
  if (event.scale === 1 && Math.abs(event.rotation) === 0) {
    event.preventDefault();
  }
}, { passive: false });

这个方法对Safari的适配性更好，能直接阻止系统级的导航手势触发。

额外注意事项 #

• 检查页面上是否有其他滚动相关的脚本（比如第三方滚动插件），它们可能会和你的拦截逻辑冲突。
• 如果你的容器有自定义滚动逻辑，确保拦截后的横向滚动能正常触发你的业务代码，而不是完全禁用。

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