iPhone端Chrome、Safari中overflow:scroll元素滚动条不显示如何解决

根因说明 #

iOS系统下所有基于WebKit内核的浏览器（包括Safari、App Store版Chrome）默认会隐藏自定义滚动容器的非激活状态滚动条，仅在用户触发滑动操作时临时展示，无原生配置项直接开启常驻显示，可通过WebKit专属CSS伪类强制定义滚动条样式实现。

可直接复用的代码修改 #

仅需在原有CSS基础上新增滚动条样式配置即可，无需额外DOM开发：

/* 原有.page类属性保留，新增以下样式 */
.page {
  /* 保留该属性保证滚动流畅度 */
  -webkit-overflow-scrolling: touch;
  max-height: 90vh;
  overflow: scroll;
  background: navajowhite;
}

/* 滚动条整体轨道配置 */
.page::-webkit-scrollbar {
  -webkit-appearance: none;
  /* 纵向滚动条宽度，可按需调整 */
  width: 4px;
  /* 横向滚动条高度，无横向滚动需求可设为0 */
  height: 4px;
}

/* 滚动条滑块配置 */
.page::-webkit-scrollbar-thumb {
  border-radius: 2px;
  /* 滑块颜色可根据UI风格自定义 */
  background-color: rgba(0, 0, 0, 0.3);
}

注意事项 #

• 若项目中存在多个滚动容器，需要给对应滚动容器分别配置上述伪类样式，可单独定义每个滚动条的外观参数
• 该方案仅修改滚动条展示样式，不会影响原有滚动交互逻辑，无额外性能损耗
• 如果后续需要隐藏滚动条但保留滚动功能，只需将::-webkit-scrollbar的width、height属性设置为0即可

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