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

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

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

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

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

::-webkit-scrollbar-button {
background-image:url('');
background-repeat:no-repeat;
width:5px;
height:0px
}

::-webkit-scrollbar-track {
background-color:#ecedee
}

::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background-color:#6dc0c8;
}

::-webkit-scrollbar-thumb:hover{
background-color:#56999f;
}

::-webkit-resizer{
background-image:url('');
background-repeat:no-repeat;
width:4px;
height:0px
}

::-webkit-scrollbar{
width: 4px;
}

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

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

::-webkit-scrollbar-track {
background-color:#ecedee
}

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

::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
  border-radius: 0px;
  background-color:#6dc0c8;
  }

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

::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
  border-radius: 0px;
  background-color:#6dc0c8;
  }

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

::-webkit-scrollbar{
width: 4px;
}

 

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

comment-avatar

*