Как можно стилизовать скроллбар в современных браузерах?

Для стилизации скроллбара в современных браузерах можно использовать свойства scrollbar с префиксом -webkit в сочетании со стандартными свойствами ширины (scrollbar-width) и цвета (scrollbar-color). 1

Для управления шириной у свойства scrollbar-width три возможных значения: auto — ширина по умолчанию, thin — тонкая полоса, none — скрытие полосы. 3 Указать ширину элемента в пикселях или процентах нельзя. 3

Свойство scrollbar-color принимает на вход два значения: первое — цвет бегунка, второе — цвет дорожки. 3 По умолчанию задано значение auto, которое говорит браузеру, что нужно использовать дефолтные параметры. 3

Также для изменения визуального представления скроллбара в Chrome, Edge и Safari можно использовать псевдоэлементы: ::-webkit-scrollbar — параметры всего элемента навигации, ::-webkit-scrollbar-track — параметры дорожки, ::webkit-scrollbar-thumb — параметры бегунка. 3

Ещё один вариант — использовать плагин postcss-scrollbar, который генерирует свойства полосы прокрутки с префиксом -webkit из стандартных свойств, что позволяет получить кросс-браузерные стили. 1