::-webkit-scrollbar

非标准：此功能是非标准的，并且不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不会对每个用户都有效。实现之间也可能存在很大的不兼容性，并且行为在将来可能会发生变化。

当元素具有可滚动溢出时，::-webkit-scrollbar CSS 伪元素会影响元素滚动条的样式。

可以将 scrollbar-color 和 scrollbar-width 标准属性用作不支持此伪元素和相关 ::-webkit-scrollbar-* 伪元素的浏览器的替代方案（请参阅浏览器兼容性）。

注意：如果支持 scrollbar-color 和 scrollbar-width 并且设置了任何非 auto 值，它们将覆盖 ::-webkit-scrollbar-* 样式。有关更多详细信息，请参阅为滚动条样式添加回退。

CSS 滚动条选择器

您可以使用以下伪元素来自定义 WebKit 浏览器中滚动条的各个部分

::-webkit-scrollbar — 整个滚动条。
::-webkit-scrollbar-button — 滚动条上的按钮（向上和向下指向的箭头，每次滚动一行）。
::-webkit-scrollbar:horizontal{} — 水平滚动条。
::-webkit-scrollbar-thumb — 可拖动的滚动句柄。
::-webkit-scrollbar-track — 滚动条的轨道（进度条），其中在白色条的顶部有一个灰色条。
::-webkit-scrollbar-track-piece — 轨道（进度条）中未被句柄覆盖的部分。
::-webkit-scrollbar:vertical{} — 垂直滚动条。
::-webkit-scrollbar-corner — 滚动条的底角，水平和垂直滚动条在此处交汇。这通常是浏览器窗口的右下角。
::-webkit-resizer — 出现在某些元素的底角的可拖动调整大小句柄。

无障碍访问

作者应避免设置滚动条样式，因为将滚动条的外观更改为默认样式破坏了外部一致性，这对可用性产生负面影响。如果设置滚动条样式，请确保颜色对比度足够，并且触摸目标的宽度和高度至少为 44px。请参阅 WCAG 2.0 技术：G183：使用 3:1 的对比度比率和了解 WCAG 2.1：目标大小。

示例

使用 `-webkit-scrollbar` 设置滚动条样式

CSS

css

.visible-scrollbar,
.invisible-scrollbar,
.mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;
  height: 2em;
  padding: 1em;
  margin: 1em auto;
  outline: 2px dashed cornflowerblue;
}

.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Demonstrate a "mostly customized" scrollbar
 * (won't be visible otherwise if width/height is specified) */
.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /* or add it to the track */
}

/* Add a thumb */
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
  background: #000;
}

HTML

html

<div class="visible-scrollbar">
  <h3>Visible scrollbar</h3>
  <p>
    Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor. Proin at
    nulla elementum, consectetur ex eget, commodo ante. Sed eros mi, bibendum ut
    dignissim et, maximus eget nibh. Phasellus blandit quam turpis, at mollis
    velit pretium ut. Nunc consequat efficitur ultrices. Nullam hendrerit
    posuere est. Nulla libero sapien, egestas ac felis porta, cursus ultricies
    quam. Vestibulum tincidunt accumsan sapien, a fringilla dui semper in.
    Vivamus consectetur ipsum a ornare blandit. Aenean tempus at lorem sit amet
    faucibus. Curabitur nibh justo, faucibus sed velit cursus, mattis cursus
    dolor. Pellentesque id pretium est. Quisque convallis nisi a diam malesuada
    mollis. Aliquam at enim ligula.
  </p>
</div>

<div class="invisible-scrollbar">
  <h3>Invisible scrollbar</h3>
  <p>
    Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword
  </p>
</div>

<div class="mostly-customized-scrollbar">
  <h3>Custom scrollbar</h3>
  <p>
    Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br />
    And pretty tall<br />
    thing with weird scrollbars.<br />
    Who thought scrollbars could be made weird?
  </p>
</div>

结果

您可以使用 @supports at 规则来检测浏览器是否支持标准的 scrollbar-color 和 scrollbar-width 属性，否则使用 ::-webkit-scrollbar-* 伪元素作为回退。以下示例显示了如何在支持的情况下使用 scrollbar-color 为滚动条应用颜色，在不支持的情况下使用 ::-webkit-scrollbar-* 伪元素。

HTML

html

<div class="scrollbox">
  <h1>Yoshi</h1>
  <p>
    Yoshi is a fictional dinosaur who appears in video games published by
    Nintendo. Yoshi debuted in Super Mario World (1990) on the SNES as Mario and
    Luigi's sidekick.
  </p>
  <p>
    Throughout the mainline Super Mario series, Yoshi typically serves as
    Mario's trusted steed.
  </p>
  <p>
    With a gluttonous appetite, Yoshi can gobble enemies with his long tongue,
    and lay eggs that doubly function as projectiles.
  </p>
</div>

CSS

.scrollbox {
  overflow: auto;
  width: 20rem;
  height: 5rem;
  border: 2px solid cornflowerblue;
  margin: 2rem auto;
  font-family: monospace;
}

css

/* For browsers that support `scrollbar-*` properties */
@supports (scrollbar-color: auto) {
  .scrollbox {
    scrollbar-color: aquamarine cornflowerblue;
  }
}

/* Otherwise, use `::-webkit-scrollbar-*` pseudo-elements */
@supports selector(::-webkit-scrollbar) {
  .scrollbox::-webkit-scrollbar {
    background: aquamarine;
  }
  .scrollbox::-webkit-scrollbar-thumb {
    background: cornflowerblue;
  }
}