CSS Scroll Bar

CSS Scrollbar Selectors

Chrome, Edge, Safari и Opera поддерживают нестандартный ::-webkit-scrollbar псевдоэлемент, который позволяет вам изменять внешний вид полосы прокрутки браузера.

Вы можете использовать следующие псевдоэлементы для настройки различных частей полосы прокрутки в браузерах WebKit:

• ::-webkit-scrollbar — вся полоса прокрутки.
• ::-webkit-scrollbar-thumb — перетаскиваемый маркер прокрутки.
• ::-webkit-scrollbar-track — дорожка (индикатор выполнения) полосы прокрутки, где поверх белой полосы находится серая полоса.
• ::-webkit-scrollbar-button — кнопки на полосе прокрутки (стрелки вверх и вниз, прокручивающие по одной строке).
• ::-webkit-scrollbar-track-piece — часть трека (индикатор выполнения), не закрытая дескриптором.
• ::-webkit-scrollbar:horizontal — горизонтальная полоса прокрутки.
• ::-webkit-scrollbar:vertical — вертикальная полоса прокрутки.
• ::-webkit-scrollbar-corner — нижний угол полосы прокрутки, где встречаются горизонтальная и вертикальная полосы прокрутки. Обычно это правый нижний угол окна браузера.
• ::-webkit-resizer— перетаскиваемый маркер изменения размера, который появляется в нижнем углу некоторых элементов.