Кастомизация Scrollbars

Chrome, Edge, Safari и Opera поддерживают нестандартный псевдоэлемент ::-webkit-scrollbar, который позволяет нам изменять внешний вид полосы прокрутки браузера.

Следующий пример создает тонкую (шириной 10 пикселей) полосу прокрутки, которая имеет серый цвет полосы/дорожки и темно-серый (#888) маркер:

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

В этом примере создается полоса прокрутки с тенью:

/* width */
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

Для браузеров на базе Webkit можно использовать следующие псевдоэлементы для настройки полосы прокрутки браузера:

• ::-webkit-scrollbar полоса прокрутки.
• ::-webkit-scrollbar-button кнопки на полосе прокрутки (стрелки, направленные вверх и вниз).
• ::-webkit-scrollbar-thumb перетаскиваемый маркер прокрутки.
• ::-webkit-scrollbar-track трек (полоса прогресса) полосы прокрутки.
• ::-webkit-scrollbar-track-piece трек (полоса прогресса), НЕ закрытый ручкой.
• ::-webkit-scrollbar-corner нижний угол полосы прокрутки, где встречаются горизонтальная и вертикальная полосы прокрутки.
• ::-webkit-resizer перетаскиваемый маркер изменения размера, который отображается в нижнем углу некоторых элементов.