Оформление полосы прокрутки на web-странице

Иногда среди бесчисленного количества существующих сайтов в интернете попадаются на вид такие, в которых полоса прокрутки на страницах имеет особый дизайн.

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

Такой метод улучшения дизайна страниц легко доступный и легко реализуемый. Для этого надо лишь прописать для конкретного документа всего несколько CSS-атрибутов, которым как и другим в CSS присваивается значение цвета либо в RGB-палитре, либо с использованием предопределенного названия цвета. Эти атрибуты следующие:

scrollbar-face-color:#000000; - задает цвет ползунка, который пользователь перетаскивает мышью;
scrollbar-highlight-color:#000000; - определяет цвет тоненького ободка (или блика) вокруг ползунка и квадратиков, находящихся вверху и внизу полосы прокрутки;
scrollbar-darkshadow-color:#000000; - указывает цвет правой и нижней границ ползунка, извне прилегающие к ободку;
scrollbar-3dlight-color:#000000; - указывает цвет левой и верхней границ ползунка;
scrollbar-shadow-color:#000000; - задает цвет маленькой тени на правой и нижней границе ползунка и рамки вокруг квадратиков при нажатии на них;
scrollbar-track-color:#000000; - определяет цвет дорожки, т.е. фон по которому двигается ползунок;
scrollbar-arrow-color:#000000; - задает цвет треугольных стрелочек в квадратиках вверху и внизу полосы прокрутки;

Комбинируя эти атрибуты при создании корпоративного сайта можно добиться самых разнообразных видов полосы прокрутки и ее компонентов. Вместо приведенного ради примера черного цвета #000000; следует подставить требуемый.

Кроме того существует также атрибут scrollbar-base-color. Он в Internet Explorer не оказывает влияние, но например в Opera, если не задан scrollbar-track-color, выполняет роль последнего. В Internet Explorer, если не указан цвет дорожки, то он автоматически формируется из значений остальных атрибутов.
Для того, чтобы метод этот заработал, приведенные выше параметры нужно применить к элементу BODY. Делается это вставкой в HEAD-секцию документа примерно такого фрагмента:

<STYLE TYPE="text/css">
BODY {scrollbar-face-color:.../* здесь прописываются требуемые атрибуты со значениями. Атрибуты разделяются точкой с запятой*/}
</STYLE>

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

<LINK HREF="scrollbar.css" REL="stylesheet" TYPE="text/css">
или
<STYLE TYPE="text/css">
@import URL(scrollbar.css);
</STYLE>

где в HREF или URL указывается используемый css-файл. Следует однако учитывать, что если на странице имеются и другие элементы, в которых присутствует полоса прокрутки (текстовое поле, фреймы), то она тоже принимает оформление главной, если не определено иначе. Оформление для каждого конкретного элемента полосы прокрутки можно аналогичным образом как и для BODY изменить на свой вкус, поменяв в стилях BODY на нужный элемент.

Наконец следует сказать, что изменять вид полосы прокрутки следует сообразно с дизайном страницы. Так как неподходящие значения атрибутов могут не улучшить общий веб дизайн сайта, а наоборот - ухудшить, что нередко вызывает недовольство пользователей.