Сегодня поговорим о полосе прокрутки страниц. А точнее про ее внешний вид, который толком не меняется уже несколько десятилетий. И мне, собственно как и вам, она изрядно поднадоела. По этому мы рассмотрим возможность о ее замене на свою.
Данное решение является очень удобным, так, как здесь не задействуются JavaScript. Что в свою очередь убирает нагрузку на сайт. Все работает с помощью стилей и имеет минимум кода.
Установка
Вставляем данный код в Таблицу стилей (CSS)
Код
::-webkit-scrollbar-button {
background-image:url('');
background-repat: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;
}
){kind=link}