掘金文章归档 · 第 59 篇 CSS 布局系列 4/9 滚动条 · hover 展示

滚动条默认不展示，滑动上去展示滚动条实现

body 挂 scroller-hover 类，全局滚动条默认隐藏、悬停显形

原文作者：随意_（掘金） | juejin.cn/post/7519046309434572838 | 发布于 2025-06-24 | 阅读 448 · 约 1 分钟

0背景

我们再写项目的时候 UI 会设计一些规范，比如滚动条的。他们的设计规范是：默认有滚动条但不展示滚动条，当鼠标划上去才展示滚动条。这个跟我们的浏览器滚动条样式有冲突，我们默认的滚动条样式是默认展示出来的。

1默认滚动条展示如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .main {
      height: 300px;
      overflow-y: auto;
      border: 1px solid red;
    }

    .item {
      height: 40px;
      width: 100%;
      background-color: #df1e1e;
      margin-bottom: 20px;
      color: black;
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
</body>

</html>

可见默认是展示的。我们要做的就是要其默认不展示，鼠标滑上去再展示。

2实现如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .main {
      height: 300px;
      overflow-y: auto;
      border: 1px solid red;
    }

    .item {
      height: 40px;
      width: 100%;
      background-color: #df1e1e;
      margin-bottom: 20px;
      color: black;
    }

    :root {
      --color-border-1: #888;
      /* 深灰色 - 滑块激活状态 */
      --color-border-2: #ddd;
      /* 浅灰色 - 滑块默认悬停状态 */
    }

    body.scroller-hover::-webkit-scrollbar,
    body.scroller-hover *::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    body.scroller-hover::-webkit-scrollbar-corner,
    body.scroller-hover *::-webkit-scrollbar-corner {
      background-color: rgba(0, 0, 0, 0);
    }

    body.scroller-hover:hover::-webkit-scrollbar-track-piece,
    body.scroller-hover *:hover::-webkit-scrollbar-track-piece {
      background-color: rgba(0, 0, 0, 0);
      border-radius: 6px;
    }

    body.scroller-hover:hover::-webkit-scrollbar-thumb,
    body.scroller-hover *:hover::-webkit-scrollbar-thumb {
      background-color: var(--color-border-2);
      border-radius: 6px;
    }

    body.scroller-hover:hover::-webkit-scrollbar-thumb:active,
    body.scroller-hover:hover::-webkit-scrollbar-thumb:hover,
    body.scroller-hover *:hover::-webkit-scrollbar-thumb:active,
    body.scroller-hover *:hover::-webkit-scrollbar-thumb:hover {
      background-color: var(--color-border-1);
    }
  </style>
</head>

<body class="scroller-hover">
  <div class="main">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
</body>

</html>
📌 注意我们在 body 上设置的 scroller-hover。此时效果：默认不展示滚动条，鼠标划上去展示。

3总结

以上我们实现了滚动条的全局优化。请注意 body 的类名配置，这样全局的所有滚动条均会按照此逻辑展示。

截图占位：鼠标悬停前（无滚动条）与悬停后（显示细滚动条）对比