Наверняка многие задумывались о том, что бы стилизовать каким-либо образом scrollbar на сайте. Но не все знают, как это сделать. А ведь это достаточно просто. Нужно всего лишь добавить пару строк в свой css файл.
Установка
Вот этот незамысловатый код добавляем в CSS-файл, используемый на вашем сайте:
Код
::-webkit-scrollbar-button{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{width:4px;height:0px} ::-webkit-scrollbar{width: 4px;}
Настройки
1. Если вы хотите изменить ширину скролбара, то меняйте в строке, указанной ниже, цифру 4 на нужное значение:
Код
::-webkit-scrollbar{width: 4px;}
2. Цвет ползунка изменяется здесь:
Код
::-webkit-scrollbar-thumb {-webkit-border-radius: 0px;border-radius: 0px;background-color:#6dc0c8;}
Где код цвета #6dc0c8 меняем на нужный. Так же можно сделать ползунок еще и с круглыми краями: border-radius нужно присвоить значение в пикселях (например, 3px) или же в процентах.
3. Цвет ползунка при наведении (hover):
Код
::-webkit-scrollbar-thumb:hover{background-color:#56999f;}
4. Фон скролл-панели изменяется здесь:
Код
::-webkit-scrollbar-track {background-color:#ecedee}
0
Для лисы и ишака, ну и сафари нужно костылить...