如何实现自定义滚动条仅按需显示及Firefox浏览器兼容问题

问题1：滚动条常驻显隐控制 #

设置overflow: auto仍无效的核心原因是：全局定义的::-webkit-scrollbar规则会强制为滚动条预留占位空间，即使容器内容未溢出也会显示空白占位。可以通过状态绑定实现按需显隐：

1. 给需要应用自定义滚动条的容器设置专属类名（避免全局样式污染），比如.custom-scroll
2. 调整CSS规则，默认隐藏滚动条样式，仅在容器hover、激活、滚动时加载样式：

/* 滚动容器基础配置 */
.custom-scroll {
  overflow: auto;
  scroll-behavior: smooth;
}

/* Webkit内核浏览器（Chrome、Edge、Safari等）滚动条配置 */
.custom-scroll::-webkit-scrollbar {
  width: 10px;
  background: transparent;
}
.custom-scroll::-webkit-scrollbar-track {
  border-radius: 10px;
  background: transparent;
  transition: background 0.2s ease;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 10px;
  transition: background 0.2s ease;
}

/* 触发状态下显示滚动条 */
.custom-scroll:hover::-webkit-scrollbar-track,
.custom-scroll:active::-webkit-scrollbar-track,
.custom-scroll:focus::-webkit-scrollbar-track {
  background: #E6E9EA;
}
.custom-scroll:hover::-webkit-scrollbar-thumb,
.custom-scroll:active::-webkit-scrollbar-thumb,
.custom-scroll:focus::-webkit-scrollbar-thumb {
  background: #B9B7BD;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #868B8E;
}

问题2：Firefox浏览器滚动条样式不生效 #

Firefox不支持-webkit前缀的滚动条规则，仅支持独有的滚动条属性，且必须直接作用在滚动容器上才能生效，对应配置直接叠加到上述.custom-scroll类中即可：

.custom-scroll {
  overflow: auto;
  scroll-behavior: smooth;
  /* Firefox滚动条基础配置 */
  scrollbar-width: thin; /* 可选值：auto | thin | none */
  /* 第一个参数为滑块颜色，第二个参数为轨道颜色 */
  scrollbar-color: #B9B7BD transparent;
  transition: scrollbar-color 0.2s ease;
}

/* Firefox触发状态下修改滚动条配色 */
.custom-scroll:hover,
.custom-scroll:active,
.custom-scroll:focus {
  scrollbar-color: #B9B7BD #E6E9EA;
}
.custom-scroll:hover::-webkit-scrollbar-thumb:hover {
  scrollbar-color: #868B8E #E6E9EA;
}

注意事项 #

如果Windows系统开启了系统级的「始终显示滚动条」配置（设置路径：Windows设置>辅助功能>视觉效果），该配置优先级高于CSS，会导致滚动条常驻无法隐藏，属于系统层面限制，无法通过样式覆盖。

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