Как создать: пользовательская полоса прокрутки

Узнайте, как использовать CSS для создания пользовательской полосы прокрутки.

Как создать пользовательскую полосу прокрутки

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

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

/* Ширина */
::webkit-scrollbar {
  width: 10px;
}
/* Рельс */
::webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Ползунок */
::webkit-scrollbar-thumb {
  background: #888;
}
/* Ползунок при наведении мыши */
::webkit-scrollbar-thumb:hover {
  background: #555;
}

Попробуйте сами

Этот пример создает полосу прокрутки с эффектом тени:

Пример

/* Ширина */
::webkit-scrollbar {
  width: 20px;
}
/* Рельс */
::webkit-scrollbar-track {
  box-shadow: inset 0 0 5px серый;
  border-radius: 10px;
}
/* Ползунок */
::webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

Попробуйте сами

Выборщик полосы прокрутки

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