如何通过CSS实现Safari（尤其是iPhone端）滚动条颜色与大小自定义

解决方案 #

纯CSS方案（兼容iOS 15.4及以上版本的移动端Safari） #

iOS Safari 从15.4版本开始支持::-webkit-scrollbar系列伪类自定义滚动条，默认滚动条仅在滚动时显示且会屏蔽自定义样式，需要添加强制显示的配置，完整代码如下：

/* 滚动条容器 */
.custom-scroll::-webkit-scrollbar {
  display: block; /* 核心：强制iOS Safari显示滚动条容器 */
  width: 6px; /* 纵向滚动条宽度 */
  height: 6px; /* 横向滚动条高度，使用overflow-x: scroll时修改这个值即可 */
}

/* 滚动条轨道 */
.custom-scroll::-webkit-scrollbar-track {
  background: #f1f1f1; /* 自定义轨道颜色 */
  border-radius: 3px;
}

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

/* 滚动条滑块hover状态，可选 */
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 容器原有配置保留，建议加上滚动流畅属性 */
.custom-scroll {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch; /* 保证iOS端滚动流畅，不影响滚动条样式生效 */
}

把上面的.custom-scroll替换成你自己的容器类名即可，你已写好的webkit相关伪类只需新增::-webkit-scrollbar下的display: block配置，就能在iOS 15.4+的Safari里生效。

低版本iOS Safari降级方案 #

如果需要兼容iOS 15.4以下的版本，纯CSS无法实现自定义滚动条，推荐用JS模拟滚动条的方案：

• 实现逻辑：隐藏原生滚动条，自定义DOM元素作为模拟滚动条，监听容器的scroll事件同步模拟滑块的位置
• 可以直接使用成熟的第三方滚动条组件，无需重复实现基础逻辑

注意：iOS Safari默认滚动条交互规则是滚动时才显示，静止后自动隐藏，如果需要滚动条常驻显示，只能用JS模拟的方案实现，纯CSS无法突破原生交互规则。

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