Стилизация полосы прокрутки

Установка

Вставляем данный код в Таблицу стилей (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;
}

Установка на этом завершена. Теперь разберем, какая строка за что отвечает.

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

Меняем ecedee на свой цвет.

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

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

Меняем 6dc0c8 на свой цвет.

Меняем значение border-radius для закругления.

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

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

Меняем 56999f на свой цвет.

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

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

Меняем значение width

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

 

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.