WebKit滚动条响应鼠标但不响应触摸操作的问题排查

核心原因 #

你当前的CSS里，::-webkit-scrollbar-thumb仅设置了宽度，未定义背景样式。在触摸设备上，Chrome要求滚动条滑块具备可见的可交互区域才能响应触摸拖动——透明或无背景的滑块会被浏览器判定为不可交互，直接忽略触摸事件。

修复步骤 #

1. 为滚动条滑块添加背景样式 #

修改CSS，给::-webkit-scrollbar-thumb补充背景色（或其他可见样式）：

.container {
  height: 5rem;
  overflow-y: auto;
}
::-webkit-scrollbar{
  width: 1.25rem;
}
::-webkit-scrollbar-track{
  background: red;
}
::-webkit-scrollbar-thumb{
  width:1.25rem;
  background: #666; /* 添加滑块背景，确保可交互区域可见 */
  border-radius: 0.625rem; /* 可选，优化视觉体验 */
}

2. 额外排查方向 #

• 检查是否有其他CSS规则（如pointer-events: none）意外作用于滚动条或容器，阻断了触摸事件传递
• 确认Chrome触摸支持功能正常：在地址栏输入chrome://flags，搜索Touch Events，确保设置为Enabled或Automatic

补充优化（可选） #

若修复后仍有细微问题，可给容器添加-webkit-overflow-scrolling: touch，优化整体触摸滚动的流畅性：

.container {
  height: 5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

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