Как стилизировать полосу прокрутки (скроллбар) с помощью CSS

Как вы уже могли понять, речь в данной статье пойдет о том, как стилизировать полосу прокрутки, или скроллбар  с помощью CSS.

Скроллбар — это ползунок в правой части вашего браузера, которые передвигается вместе со скроллингом сайта. Его стиль не менялся уже десятки лет, но, вы можете изменить его стилистику в дизайн вашему сайту.

Для того, что бы стилизировать скроллбар, совершенно не требуется использовать javaScript. Все что необходимо, минимум CSS.

Весь код стилизации скроллбара:

А теперь рассмотрим его более детально, что бы вам стало понятнее что можно имезнять

Цвет дорожки, по которой двигается бегунок прокрутки:

Цвет бегунка полосы, а так же его закругление:

Цвет бегунка при наведении на него курсора:

Основная ширина полосы прокрутки:

 

Оставьте ответ

comment-avatar

*