如何解决iOS 15 Safari中overflow:auto元素滚动条不可见问题

• 编辑补充：仅设置overflow: auto属性就足以触发滚动条不可见的问题。
• 二次编辑：该问题疑似与Safari可滚动div滚动条颜色异常问题为重复问题。
• 现象：Linux环境下Firefox浏览器可正常展示文本框滚动条，但iOS 15系统的Safari浏览器中滚动条无法显示；移除元素的display: flex或overflow: auto属性后，滚动条可恢复可见。
• 诉求：通过配置让滚动条在iOS端Safari浏览器中正常显示。

复现代码 #

CSS规则 #

height: 200px;
width: 300px;
overflow: auto;

HTML结构 #

<p id="tbox">
  LLorem ipsum dolor sit amet, consectetur adipiscing elit. In eu odio sit amet elit molestie fringilla. Maecenas vitae nunc quis diam finibus laoreet sed sed justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  Cras posuere arcu orci, ut fermentum lectus vehicula sed. Suspendisse potenti. Integer venenatis diam erat, in maximus mauris varius nec. Nunc eget ante urna. Quisque at ullamcorper tortor. Proin pharetra scelerisque ante, quis tempus tellus interdum
  eget. Duis eget tellus at tellus sagittis eleifend auctor ut dolor. Aenean eget sodales metus, nec luctus metus. Maecenas turpis lorem, condimentum in diam non, lobortis molestie nunc. Vivamus et lacus eu odio ultrices molestie. Etiam auctor pharetra
  fringilla. Nulla placerat ultricies risus, eget ultricies dolor volutpat vitae. Aliquam auctor suscipit eros et bibendum. Pellentesque lectus metus, dignissim vel sodales ut, dignissim et augue.
</p>

iOS端Safari采用Webkit内核，默认滚动条逻辑为滚动时才临时浮现、悬浮于内容之上，且会自动适配滚动条颜色，当自动取色和容器背景色过于接近时就会出现“看不见”的问题，可通过以下两种方式解决：

1. 自定义滚动条样式强制常驻、明确区分颜色
   给滚动容器添加Webkit系滚动条自定义样式，强制设置滚动条尺寸、轨道和滑块颜色，既可以让滚动条常驻显示，也能避免颜色融合问题：

   /* 纵向滚动条宽度设置 */
   #tbox::-webkit-scrollbar {
     width: 6px;
   }
   /* 滚动条轨道样式 */
   #tbox::-webkit-scrollbar-track {
     background: #f5f5f5;
     border-radius: 3px;
   }
   /* 滚动条滑块样式 */
   #tbox::-webkit-scrollbar-thumb {
     background: #bfbfbf;
     border-radius: 3px;
   }
   /* 滑块hover态样式 */
   #tbox::-webkit-scrollbar-thumb:hover {
     background: #999;
   }
   

2. 仅修复颜色融合问题（保留原生滚动条交互逻辑）
   如果不需要滚动条常驻，只需要解决看不见的问题，给滚动容器设置和系统默认滑块颜色有明显对比度的背景色即可，比如给容器添加background: #ffffff;属性，就能避免Safari自动取色和背景同色的问题。

注意：如果未自定义滚动条样式，iOS Safari的滚动条默认不会常驻显示，仅在用户触发滚动操作时才会临时出现，这是系统原生交互逻辑，不属于bug。

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