Изменение цвета полосы прокрутки

Всё реже на сайтах встречаются цветные полосы прокрутки, так как этот эффект подходит не ко всем дизайнам.

Но есть и сайты на которых хорошо вписывается цветная полоса прокрутки, в основном она под цвет сайта.

Для реализации этого, нам понадобится css стили. Есть множество форумов, где люди представляют эти свойства(цвет полосы прокрутки) в плохом виде, типа того, что они портят дизайн, и раздражают. Да это так. Но есть малое кол-во сайтов, где полоса прокрутки имеет цвет сайта, и не мешает вообще. Но достичь того эффекта не так просто.

Теперь давайте рассмотрим все возможные свойства полосы прокрутки:

1. scrollbar-arrow-color - задаёт цвет стрелки полосы прокрутки

2. scrollbar-track-color - задаёт цвет фон полосы под ползунком

3. scrollbar-face-color - цвет ползунка(полоски)

4. scrollbar-shadow-color, scrollbar-highlight-color - определяют цвет наружной рамки ползунка(полосы)

5. scrollbar-3dlight-color, scrollbar-darkshadow-color - определяют цвет внутренней рамки

Все стили прописываются в body, то есть в файле style.css создаём параметры для атрибута body, тогда наш пример будет выглядеть так:

body {
scrollbar-arrow-color: #fafafa; /* Задаём цвет стрелок полосы */
scrollbar-track-color: #fafafa; /* Задаём цвет фона полосы прокрутки */
scrollbar-face-color: #0099ff; /* Задаём цвет ползунка(полосы) */
scrollbar-shadow-color: #fafafa; /* Задаём цвет внешней рамки */
scrollbar-highlight-color: #fafafa;
scrollbar-3dlight-color: #0099ff; /* Задаём цвет внутренней рамки */
scrollbar-darkshadow-color: #0099ff; 
}

Наша полоса прокрутки будет синего цвета, фон полосы белый, цвет стрелок белый, внешняя рамка как цвет ползунка, и внутренняя белого цвета.

И ещё раз напомним то, что большинство пользователей не одобряет сайт с яркой полосой прокрутки, если полоса будет очень яркой и будет резать глаза, то Вы просто потеряете пользователей.

Поделиться...