Как сделать - полосу прокрутки
Узнайте, как создать пользовательскую полосу прокрутки с помощью CSS.
Настраиваемые полосы прокрутки
Настраиваемые полосы прокрутки не поддерживаются в Firefox или IE/Edge.
Создание пользовательских полос прокрутки
Браузеры WebKit, такие как Chrome, Safari и Opera, поддерживают нестандартные ::-webkit-scrollbar
псевдо-элементы, что позволяет нам изменять внешний вид полосы прокрутки браузера.
В следующем примере создается тонкая полоса прокрутки (10px Wide), которая имеет серый цвет дорожки/полосы и темно-серый (#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
нижний угол полосы прокрутки, где встречаются как горизонтальные, так и veritcal полосы прокрутки.::-webkit-resizer
Перетаскивание маркера изменения размера, который отображается в нижнем углу некоторых элементов.