如何实现macOS浏览器默认显示滚动条且兼容iOS新版本

嘿，我之前也碰到过这个闹心的问题——macOS浏览器默认把滚动条藏起来，用户经常没意识到内容还能滚动，而且iOS新版本又不支持滚动条自定义，踩了好几个坑才找到靠谱的方案，给你分享下：

核心思路是针对桌面端（macOS）和移动端（iOS）做差异化处理：利用媒体查询区分触摸设备和桌面设备，只在支持滚动条自定义的桌面浏览器上强制显示滚动条，iOS端保持原生行为避免失效。

先看完整的代码实现：

HTML结构 #

<div class="wrapper">
  <div class="content">
    The content
  </div>
</div>

CSS样式 #

.wrapper {
  width: 300px;
  height: 400px;
  overflow: auto;
}

.content {
  height: 800px;
  background-color: #fffaaa;
}

/* 仅在支持鼠标hover的桌面设备上生效（比如macOS） */
@media (hover: hover) and (pointer: fine) {
  .wrapper::-webkit-scrollbar {
    width: 10px; /* 设置滚动条宽度 */
  }

  .wrapper::-webkit-scrollbar-track {
    background: #f1f1f1; /* 滚动条轨道背景 */
  }

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

  .wrapper::-webkit-scrollbar-thumb:hover {
    background: #555; /* hover时的滑块颜色 */
  }
}

为啥这么写？ #

• 媒体查询(hover: hover) and (pointer: fine)会精准命中macOS这类用鼠标操作的桌面设备，iOS的触摸设备会自动跳过这段样式，完美避开iOS不支持滚动条自定义的问题。
• 通过::-webkit-scrollbar系列伪元素自定义滚动条，强制让macOS浏览器的滚动条一直显示，用户一眼就能知道内容可滚动。
• iOS端保持原生的触摸滚动行为，不会因为无效样式出现异常。

亲测在macOS的Chrome、Safari上都能正常显示滚动条，iOS的Safari和Chrome也完全兼容，没毛病～

备注：内容来源于stack exchange，提问作者noiseymur