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

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

В браузерах Chrome, Edge и Safari для оформления полосы прокрутки используется псевдоэлемент ::-webkit-scrollbar. www.8host.com Например, для определения ширины всей полосы прокрутки можно установить свойство width: 12px, а для цвета зоны отслеживания — background: orange. www.8host.com Для цвета бегунка — background-color: blue, а для отступа вокруг него — border: 3px solid orange. www.8host.com

В Firefox для стилизации полос прокрутки применяются свойства CSS Scrollbars, в частности scrollbar-width и scrollbar-color. www.8host.com Например, чтобы создать полосу оранжевого цвета с синим бегунком, можно использовать код: body { scrollbar-width: thin; scrollbar-color: blue orange; }. www.8host.com

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