使用::-webkit-scrollbar自定义滚动条时如何尊重macOS滚动条显示偏好？

是的，存在既能自定义滚动条样式，又能尊重macOS用户滚动条显示偏好的方案，核心思路是避免覆盖系统的滚动条显示逻辑，同时对样式进行定制，以下是两种可行方法：

方法一：使用标准CSS滚动条属性（推荐） #

标准的scrollbar-width和scrollbar-color属性不会破坏macOS原生的滚动条显示行为，仅修改样式，同时兼容Firefox等非Webkit内核浏览器：

html {
  /* 设置滚动条宽度 */
  scrollbar-width: thin;
  /* 设置滚动条滑块与轨道颜色，轨道设为透明不干扰系统逻辑 */
  scrollbar-color: red transparent;
}

/* 针对Webkit内核浏览器（Safari、Chrome等）补充自定义样式 */
html::-webkit-scrollbar {
  width: 10px;
}

html::-webkit-scrollbar-track {
  background-color: transparent;
}

html::-webkit-scrollbar-thumb {
  background-color: red;
  border-radius: 5px; /* 可选：给滑块添加圆角 */
}

这种方式下，滚动条会完全遵循用户在macOS系统设置中的偏好——仅在滚动时显示，同时应用你自定义的颜色与宽度。

方法二：模拟系统自动隐藏行为的Webkit专属样式 #

如果你需要更精细的控制，可以通过设置滑块默认透明，仅在滚动、hover或聚焦时显示，还原系统的自动隐藏逻辑：

html::-webkit-scrollbar {
  width: 10px;
  /* 轨道设为透明，不占用视觉空间 */
  background-color: transparent;
}

html::-webkit-scrollbar-thumb {
  /* 默认完全透明，接近隐藏状态 */
  background-color: rgba(255, 0, 0, 0);
  border-radius: 5px;
  /* 添加过渡动画，让显示/隐藏更自然 */
  transition: background-color 0.2s ease;
}

/* 当滚动容器被hover、正在滚动，或者容器获得焦点时，显示完整样式 */
html:hover::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb:active,
html:focus-within::-webkit-scrollbar-thumb {
  background-color: red;
}

这种方式通过CSS状态模拟了macOS滚动条的自动隐藏行为，同时保留了自定义样式。

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