如何启用CSS的X轴与Y轴双向滚动并解决Y轴滚动失效问题

我来帮你排查这个困扰已久的问题！你遇到的情况大概率是滚动事件被干扰，或者容器的高度/样式设置有冲突，下面是几个实用的解决思路：

1. 检查是否有JavaScript拦截了Y轴滚动事件 #

很多时候自定义X轴滚动的脚本会不小心阻止了Y轴的默认滚动行为。比如如果你的代码里有监听wheel事件来实现横向滚动，一定要注意只在判断是横向滚动时才阻止默认行为，纵向滚动要让浏览器自己处理：

document.getElementById('parent').addEventListener('wheel', function(e) {
  // 只有当横向滚动的幅度大于纵向时，才触发自定义横向滚动
  if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
    e.preventDefault();
    this.scrollLeft += e.deltaX;
  }
  // 纵向滚动时什么都不做，交给浏览器默认逻辑
});

如果没有自定义滚动脚本，也可以检查有没有其他事件监听器（比如touchmove）调用了preventDefault()，这也会影响鼠标滚动。

2. 确认容器和子元素的高度设置是否正确 #

Y轴滚动生效的前提是子元素总高度超过父容器的高度，如果父容器高度没设置好，或者子元素高度不够，自然不会出现Y轴滚动：

• 给父容器设置明确的高度或最大高度：

  #parent {
    width: 100%;
    max-height: 80vh; /* 或者固定高度比如500px */
    overflow-x: auto;
    overflow-y: auto;
  }
  

• 检查子元素的总高度是否确实超过了父容器的高度，可以用浏览器开发者工具的Elements面板查看元素的实际尺寸。

3. 排查CSS属性对滚动的干扰 #

有些CSS属性会悄悄影响滚动行为，试试添加这些设置：

#parent {
  touch-action: pan-x pan-y; /* 允许X、Y方向的触摸/鼠标滚动 */
  pointer-events: auto; /* 确保容器能正常接收鼠标事件 */
}

另外，用开发者工具查看父容器的计算样式，确认overflow-x和overflow-y确实是auto或scroll，没有被其他CSS规则覆盖（比如继承了父级的overflow: hidden）。

4. 尝试overflow: overlay（部分浏览器支持） #

如果上面的方法都没用，可以试试overflow: overlay，它和auto类似，但滚动条会覆盖在内容上，有时能解决滚动轴之间的冲突：

#parent {
  overflow-x: overlay;
  overflow-y: overlay;
}

先从检查JavaScript事件开始，这是最常见的原因，再一步步排查样式和高度问题，应该就能解决啦！

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