Своя полоса прокрутки

Здесь вы узнаете, как сделать свою пользовательскую полосу прокрутки при помощи CSS.

Пользовательские полосы прокрутки

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

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

В следующем примере создается тонкая (ширина 10px) полоса прокрутки с серой дорожкой и темно-серым бегунком (#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 grey;
  border-radius: 10px;
}

/* бегунок */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

Селекторы полосы прокрутки

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

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