overflow-x在带触控板的iPad上异常：垂直滚动触发页面滚动求助

这个问题确实很多开发者碰到过，本质是iPadOS的触控板滚动识别逻辑在处理局部滚动元素时的误判——哪怕你只给元素开了横向滚动，系统还是会尝试在这个元素上解析垂直滚动操作，当发现垂直方向没有可滚动空间时，就会把事件冒泡到页面，导致滚动中断、页面突然开始整体滚动的问题。

下面是几个可行的解决方案：

1. 明确设置垂直方向溢出隐藏 #

你之前用overflow: hidden再覆盖overflow-x: scroll的方式其实已经解决了问题，更清晰的写法是直接指定overflow-y: hidden，避免浏览器默认的overflow-y: visible带来的识别混淆：

.scroll-row { 
  overflow-x: scroll; 
  overflow-y: hidden; /* 明确禁用垂直方向滚动 */
}

原理是告诉浏览器该元素垂直方向没有可滚动内容，系统就不会尝试在这个元素上处理垂直滚动操作，直接将事件传递给页面整体。

2. 使用CSS touch-action属性精准控制滚动行为 #

这是更现代、更直接的方案，通过touch-action属性告诉浏览器该元素允许的触控/触控板操作类型，从根源上避免识别错误：

.scroll-row { 
  overflow-x: scroll; 
  overflow-y: hidden;
  touch-action: pan-y; /* 仅允许垂直滚动传递到父元素，横向滚动由当前元素处理 */
}

如果需要保留页面的缩放功能，可以改成：

touch-action: pinch-zoom, pan-y;

这个属性会直接告诉iPadOS的触控板逻辑，垂直方向的滚动不需要在当前元素上处理，直接交给页面，彻底解决滚动中断的问题。

3. JavaScript事件阻止（不推荐，仅作备选） #

如果上述CSS方案无效，可以尝试通过JS阻止不必要的滚动冒泡，但可能会影响其他交互（比如元素内的其他触控操作），所以优先用CSS方案：

document.querySelector('.scroll-row').addEventListener('wheel', function(e) {
  // 当是垂直滚动时，阻止事件冒泡，让页面正常滚动
  if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
    e.stopPropagation();
  }
}, { passive: false });

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