如何修改scrollbar thumb颜色并使其仅在滚动时显示？

你可以通过调整CSS规则，让滚动条Thumb默认隐藏，仅在容器被hover、聚焦或滚动时显示蓝色，还原浏览器默认的隐藏逻辑：

修改后的测试代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      div#scrollable {
        border: 5px red solid;
        width: 150px;
        height: 200px;
        overflow-y: auto;
      }

      ::-webkit-scrollbar {
        width: 6px;
      }

      /* 默认状态下Thumb透明隐藏 */
      ::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 3px;
        transition: background 0.2s ease; /* 平滑过渡显示/隐藏 */
      }

      /* 容器hover、聚焦、滚动时显示蓝色Thumb */
      #scrollable:hover::-webkit-scrollbar-thumb,
      #scrollable:focus-within::-webkit-scrollbar-thumb,
      #scrollable::-webkit-scrollbar-thumb:active {
        background: blue;
      }
    </style>
  </head>

  <body>
    <div id="scrollable">
      <p style="height: 1000px">my text</p>
    </div>
  </body>
</html>

核心逻辑说明 #

1. 默认将::-webkit-scrollbar-thumb的背景设为透明，让滚动条Thumb隐藏
2. 通过hover（鼠标悬停）、focus-within（容器聚焦，兼容键盘导航场景）、active（滚动过程中）这几个状态触发，将Thumb背景改为蓝色
3. 加入transition属性让显示/隐藏的切换更顺滑，贴近浏览器原生体验

内容的提问来源于stack exchange，提问作者无夜之星辰