CSS自定义WebKit滚动条后自动隐藏失效，如何保留默认隐藏行为？

当直接设置::-webkit-scrollbar的width属性时，会强制浏览器始终显示滚动条，从而覆盖原本的默认行为。要在样式化滚动条的同时保留默认显示逻辑，可以通过以下方式实现：

针对Chrome（未使用时隐藏，滚动/hover时显示） #

避免给全局的::-webkit-scrollbar设置固定宽度，而是通过动态触发的方式在滚动条激活时应用宽度和样式：

/* 默认隐藏滚动条 */
::-webkit-scrollbar {
  width: 0;
}

/* 当元素被hover、聚焦或滚动时，显示样式化的滚动条 */
:hover::-webkit-scrollbar,
:focus::-webkit-scrollbar,
.scroll-active::-webkit-scrollbar {
  width: 4px;
}

/* 样式化滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 2px;
}

如果需要完全匹配Chrome原生的「仅滚动时显示」行为，可以结合JavaScript监听元素滚动事件，给元素添加/移除scroll-active类，确保只有滚动过程中才显示滚动条。

针对Safari（始终隐藏，仅滚动时显示） #

不设置::-webkit-scrollbar的width属性，仅样式化滚动条滑块即可保留Safari的默认隐藏逻辑：

/* 不设置::-webkit-scrollbar的width，保留默认隐藏行为 */
::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 2px;
  /* 若需要调整滑块宽度，通过min-width实现 */
  min-width: 4px;
}

这样Safari会保持原本的隐藏状态，仅在滚动时显示样式化后的滑块。

通用兼容方案 #

如果需要同时适配两款浏览器的默认行为，可通过特性检测类的媒体查询区分处理：

/* 针对Chrome：默认隐藏，激活时显示 */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
  ::-webkit-scrollbar {
    width: 0;
  }
  :hover::-webkit-scrollbar,
  :focus::-webkit-scrollbar {
    width: 4px;
  }
}

/* 通用滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 2px;
}

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