Как стилизовать скролл CSS

Для стилизации скролла в CSS можно использовать псевдоэлементы ::-webkit-scrollbar и ::-webkit-scrollbar-thumb для браузеров на основе WebKit (например, Google Chrome, Safari). Для других браузеров можно использовать свойства scrollbar-width и scrollbar-color.

Пример стилизации скролла в WebKit:

/* Стилизация скролла */
::-webkit-scrollbar {
  width: 10px; /* ширина скролла */
}

/* Стилизация ползунка скролла */
::-webkit-scrollbar-thumb {
  background-color: #ccc; /* цвет ползунка */
  border-radius: 5px; /* скругление углов ползунка */
}

/* Стилизация трека скролла */
::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* цвет трека */
}

Пример стилизации скролла для других браузеров:

/* Стилизация скролла */
scrollbar-width: thin; /* ширина скролла */
scrollbar-color: #ccc #f1f1f1; /* цвет ползунка и трека */