Как использовать кастомные CSS-свойства для стилизации полос прокрутки?

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

• scrollbar-color. timeweb.cloud Принимает на вход два значения: первое — цвет бегунка, второе — цвет дорожки. timeweb.cloud По умолчанию задано значение auto, которое говорит браузеру использовать дефолтные параметры. timeweb.cloud
• scrollbar-width. timeweb.cloud Управляет шириной элемента. timeweb.cloud У свойства есть три возможных значения: auto — ширина по умолчанию, thin — тонкая полоса, none — скрытие полосы. timeweb.cloud Указать ширину элемента в пикселях или процентах нельзя. timeweb.cloud

Также для изменения визуального представления скроллбара в Chrome, Edge и Safari можно использовать псевдоэлементы: timeweb.cloud

• ::-webkit-scrollbar — параметры всего элемента навигации; timeweb.cloud
• ::-webkit-scrollbar-track — параметры дорожки; timeweb.cloud
• ::webkit-scrollbar-thumb — параметры бегунка. timeweb.cloud

При настройке дизайна полосы прокрутки важно учитывать, что между ползунком и полосой прокрутки должен быть хороший контраст, чтобы пользователь мог легко заметить это. webformyself.com