Сайт ищет нового владельца по разумной цене :) По всем вопросам: promonik1@ya.ru, skype: nik-luck007, https://vk.com/promonik
2
Вы не авторизованы!
Присоединяйтесь к нашему сообществу :)
авторизация
Вакансии
На сайт требуется контент-менеджер
смотреть вакансии
Меняем полосу прокрутки (scrollbar) на сайте для webkit-браузеров

Меняем полосу прокрутки (scrollbar) на сайте для webkit-браузеров

Украшения 2017-Мар-27 Mihail 185 2

Наверняка многие задумывались о том, что бы стилизовать каким-либо образом 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}
Источник: https://yraaa.ru/
2 комментария
avatar
0
1
Такой вариант скроллбара более производительный чем яваскриптовый, жаль что он только для вебкита)
avatar
0
2
Если учесть, что на вебкит почти все браузеры (хром, опера, яндекс), то решение неплохое smile Для лисы и ишака, ну и сафари нужно костылить...
avatar