Для изменения внешнего вида скроллбара с помощью CSS можно использовать следующие свойства:
scrollbar-width
— устанавливает ширину скроллбара. Значениеthin
устанавливает тонкий скроллбар, аauto
— стандартную ширину.scrollbar-color
— устанавливает цвет скроллбара. Значение должно состоять из двух цветов, разделенных запятой: первый цвет — это цвет полосы скроллбара, второй — цвет фона скроллбара.::-webkit-scrollbar
— псевдоэлемент, который позволяет настраивать внешний вид скроллбара в браузерах на основе движка WebKit (например, Google Chrome, Safari).::-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;
}