CSS-псевдоэлемент `::-webkit-scrollbar`

CSS-псевдоэлемент ::-webkit-scrollbar влияет на стиль полосы прокрутки элемента, если его содержимое выходит за границы области прокрутки.

Стандартные свойства scrollbar-color и scrollbar-width можно использовать вместо него в браузерах, которые не поддерживают этот псевдоэлемент и связанные с ним псевдоэлементы ::-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 — перетаскиваемый маркер изменения размера, который появляется в нижнем углу некоторых элементов.

Доступность

Авторам следует избегать стилизации полос прокрутки, поскольку изменение их внешнего вида по сравнению с вариантом по умолчанию нарушает согласованность с окружением, что отрицательно сказывается на удобстве использования. Если вы стилизуете полосы прокрутки, убедитесь, что контрастность цветов достаточна, а размер сенсорных областей составляет не менее 44 пикселей по ширине и высоте. См. Методы WCAG 2.0: G183: использование коэффициента контрастности 3:1 и Понимание WCAG 2.1: размер целевой области.

Примеры

Стилизация полос прокрутки с помощью -webkit-scrollbar

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: #aaaaaa; /* or add it to the track */
}

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

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>

Результат

Добавление резервного варианта для стилей полосы прокрутки

Чтобы определить, поддерживает ли браузер стандартные свойства scrollbar-color и scrollbar-width, можно использовать директиву @-правила @supports, а если нет — применить резервный вариант с псевдоэлементами ::-webkit-scrollbar-*. В следующем примере показано, как задать цвета полос прокрутки с помощью scrollbar-color, если свойство поддерживается, и псевдоэлементов ::-webkit-scrollbar-*, если нет.

HTML

<div class="scroll-box">
  <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

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

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

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

Результат

В примере ниже можно прокручивать содержимое рамки по вертикали, чтобы увидеть эффект стилизации полосы прокрутки.

Спецификации

Не входит ни в один стандарт.

Совместимость с браузерами

См. также

• scrollbar-width
• scrollbar-color
• Не используйте пользовательские полосы прокрутки (2023)
• Стилизация полос прокрутки на developer.chrome.com (2024)
• Стилизация полос прокрутки на WebKit.org (2009)