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

В середине 2002-го года одной из самых популярных примочек среди начинающих дизайнеров стало изменение стиля скроллеров на экране с помощью каскадных таблиц стилей (.css). Соответственно, начало возникать огромнейшее количество недоразумений и вопросов по этому поводу. В данной статье мы собираемся раз и на всегда покончить с ними. Итак, как изменить цвет скроллера на странице?

Самый простой из известных мне способов – использование CSS (англ. - Cascade Style Sheets, рус. - Каскадные Таблицы Стилей), которые были вкратце упомянуты в статье на нашем сайте - “Гиперссылка загорается при "наведении"” ( HTTP://MWEB.RU/masteru/26.php ) и других статьях. На данный момент, науке известны два способа. С подключением внешнего файла и без него. Рассмотрим все по порядку.

С подключением внешнего файла.

В заголовок страницы , перед тэгом </head> необходимо вставить
<link rel="stylesheet" href="style.css" type="text/css">
эта строка будет вызывать файл style.css и использовать шаблон стиля указанном в нем для всей страницы. В самом файле, который можно создать в Блокноте а потом переименовать его расширение в .css, пишите:
body {
scrollbar-dark-shadowcolor:#000000;
scrollbar-light-shadow-color:#000000;
scrollbar-base-color:#000000;
scrollbar-arrow-color:#000000;
scrollbar-face-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-3d-light-color:#000000;
}

Без подключения внешнего файла

В примере без подключения внешнего файла (придется одно и тоже вписывать на каждой странице, но некоторым это действие нравится). Вставляем весь этот код в заголовок, перед тэгом </head>:
<style>
body {
scrollbar-dark-shadowcolor:#000000;
scrollbar-light-shadow-color:#000000;
scrollbar-base-color:#000000;
scrollbar-arrow-color:#000000;
scrollbar-face-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-3d-light-color:#000000;
}
</style>

Внимание, все цвета в выше приведенных примерах прописаны как “#000000”, то есть черные. Ниже приведена схема, демонстрирующая названия элементов скроллера. Так вам будет удобнее и нагляднее понять, какие параметры отвечают а те или иные области скролл-бара (она же – полоса прокрутки):

Сопоставляя элементы рисунка с соответствующими частями скроллера меняете “#000000” на любой желаемый цвет. Желаем удачи в использовании данной функции в Internet Explorer 5 и выше (да, насколько известно, изменение цвета скроллера не поддерживается в остальных броузерах). Так что данная фишка будет оценена пользователями, которые используют IE. Остальные же абсолютно ничего не заметят :-)

Автор: Haida
Материал сайта: MasterWeb - наковальня web-мастера

Дополнение

Чтобы изменить цвет трека полосы прокрутки, нужно задать в описании стиля: scrollbar-track-color.

Цвет яркого блика на левой и верхней границе бегунка и кнопок со стрелками: scrollbar-highlight-color.

Чтобы добиться эффекта плоской полосы прокрутки, как на нашем сайте, нужно, чтобы следующие атрибуты имели одинаковое значение:

scrollbar-base-color: #XXXXXX;
scrollbar-face-color: #XXXXXX;

scrollbar-shadow-color: #YYYYYY;
scrollbar-highlight-color: #YYYYYY;

Автор: -M@lder-
Материал сайта: Lipchin Labs

В раздел "CSS и вёрстка" | В раздел "Статьи" | Наверх страницы