Chrome中overflow-x: scroll仅设备模式生效，桌面端无法拖拽滚动问题

问题原因 #

桌面Chrome默认不会为水平滚动容器启用鼠标拖拽滚动功能，只有触摸设备（或设备模拟模式）才默认支持；而Shift+滚轮是浏览器原生的水平滚动快捷键，所以能正常生效。

解决方案 #

给外层滚动容器添加以下CSS属性即可启用桌面端拖拽滚动：

1. 核心属性：touch-action: pan-x
   这个属性明确告诉浏览器允许该容器的水平拖拽动作，不会被默认行为拦截。

2. 可选的视觉提示
   添加光标样式，让用户直观知道这个区域可以拖拽。

示例代码：

/* 外层滚动容器 */
.nav-scroll-area {
  display: flex;
  overflow-x: scroll;
  touch-action: pan-x; /* 关键：开启水平拖拽支持 */
  cursor: grab; /* 拖拽前的光标样式 */
}

/* 拖拽中的光标样式 */
.nav-scroll-area:active {
  cursor: grabbing;
}

/* 内层按钮容器 */
.nav-buttons-container {
  display: flex;
  width: max-content; /* 确保容器宽度适配所有按钮 */
  gap: 12px; /* 按钮间距，按需调整 */
}

额外排查点 #

• 检查是否有自定义JS事件（比如mousedown、touchstart）调用了preventDefault()，这类操作可能会阻止浏览器的原生拖拽滚动行为，需要调整事件逻辑，避免在滚动容器上阻止默认动作。
• 确认外层容器没有被设置user-select: none，虽然不直接影响拖拽，但部分场景下会引发意外冲突。

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