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

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

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

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

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

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