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

  alexei 14/01/2022 - 10:52

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


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

Внимание! Пользовательские полосы прокрутки не поддерживаются в Firefox и Edge до версии 79.


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

Браузеры 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 перетаскиваемый бегунок изменения размера, который появляется в нижнем углу некоторых элементов.