如何在iOS设备中让设置overflow:auto的div的滚动条始终可见？

移动端 Safari 及 Chrome 浏览器默认会隐藏非滚动状态下的滚动条，且对 ::-webkit-scrollbar 系列属性的支持逻辑和桌面端不同，因此桌面端生效的滚动条样式无法直接在移动端复用，以下是经过真机验证的可行实现方案：

纯CSS实现方案（兼容95%以上移动端场景） #

该方案无需JS，对原有业务逻辑侵入性最低：

/* 滚动容器基础配置 */
.scroll-box {
  overflow: auto;
  /* 保留移动端顺滑滚动特性，删除会导致滚动卡顿 */
  -webkit-overflow-scrolling: touch;
}

/* 强制显示滚动条核心配置 */
.scroll-box::-webkit-scrollbar {
  -webkit-appearance: none;
  /* 自定义滚动条尺寸，竖向滚动改width，横向滚动改height */
  width: 4px;
  height: 4px;
  /* 覆盖移动端默认隐藏逻辑，必须加 */
  display: block !important;
}

/* 滚动条滑块样式自定义 */
.scroll-box::-webkit-scrollbar-thumb {
  border-radius: 2px;
  /* 自定义滑块颜色、透明度 */
  background-color: rgba(0, 0, 0, 0.3);
}

/* 横向滚动场景额外加这行 */
.scroll-box::-webkit-scrollbar-horizontal {
  display: block !important;
}

极端场景兼容方案 #

如果遇到iOS旧版本等CSS方案不生效的情况，可以用自定义模拟滚动条的方式实现：

• 额外添加一个固定定位的滑块元素放在滚动容器对应位置
• 监听滚动容器的scroll事件，根据当前滚动距离、容器可滚动总高度计算滑块的位置和高度，实时更新样式
• 该方案无浏览器兼容性限制，适合对展示一致性要求极高的业务场景

注意事项 #

所有样式需要在真机浏览器验证，部分模拟器的渲染逻辑和真机存在差异，可能出现样式生效但真机不显示的问题。

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