移动端iOS Safari中可滚动div缺失滚动条的解决方法咨询

你的.scrollable容器在桌面浏览器、响应式视图、模拟器等环境都能正常显示滚动条，但iOS Safari移动端默认隐藏了滚动条，这是iOS的原生行为。可以通过WebKit专属的滚动条伪元素样式来强制让滚动条可见，以下是修改后的完整CSS：

.scrollable {
  padding: 10px;
  width: 100%;
  min-height: 150px;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* 针对iOS Safari的滚动条自定义样式 */
.scrollable::-webkit-scrollbar {
  width: 6px; /* 定义滚动条宽度，必须设置才会显示 */
}

.scrollable::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道背景 */
  border-radius: 3px;
}

.scrollable::-webkit-scrollbar-thumb {
  background: #888; /* 滚动条滑块颜色 */
  border-radius: 3px;
}

.scrollable::-webkit-scrollbar-thumb:hover {
  background: #555; /* 滑块hover状态颜色（移动端可忽略） */
}

说明： #

• 设置::-webkit-scrollbar的宽度是关键，iOS Safari只有在明确指定滚动条宽度后才会显示它
• 你可以根据需求调整宽度、颜色、圆角等样式，让滚动条适配你的页面设计
• iOS上的滚动条默认在不滚动时会自动隐藏，滚动过程中会显示；纯CSS无法实现一直固定显示，但上述样式已经能保证滚动时清晰可见，满足大部分场景需求

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