Как изменить скроллбар CSS

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

1. scrollbar-width — устанавливает ширину скроллбара. Значение thin устанавливает тонкий скроллбар, а auto — стандартную ширину.
2. scrollbar-color — устанавливает цвет скроллбара. Значение должно состоять из двух цветов, разделенных запятой: первый цвет — это цвет полосы скроллбара, второй — цвет фона скроллбара.
3. ::-webkit-scrollbar — псевдоэлемент, который позволяет настраивать внешний вид скроллбара в браузерах на основе движка WebKit (например, Google Chrome, Safari).
4. ::-webkit-scrollbar-thumb — псевдоэлемент, который позволяет настраивать внешний вид полосы скроллбара в браузерах на основе движка WebKit.

Пример использования:

/* Установка тонкого скроллбара с красной полосой */
::-webkit-scrollbar {
  width: thin;
}

::-webkit-scrollbar-thumb {
  background-color: red;
}

/* Установка стандартной ширины скроллбара с градиентной полосой */
::-webkit-scrollbar {
  width: auto;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #ff0000, #0000ff);
}

/* Установка ширины и цвета скроллбара */
body {
  scrollbar-width: thin;
  scrollbar-color: red blue;
}