Как сделать - Пользовательская полоса прокрутки
Узнайте, как создать пользовательскую полосу прокрутки с помощью CSS.
Пользовательские полосы прокрутки
Примечание. Пользовательские полосы прокрутки не поддерживаются в Firefox или Edge до версии 79.
Как создать собственные полосы прокрутки
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
перетаскиваемый маркер изменения размера, который появляется в нижнем углу некоторых элементов.