Css scrollbar - розмальовуємо scrollbar засобами css

У деяких випадках можна пожертвувати звичним видом елементів управління і трохи пожвавити інтерфейс своїми власними стилями. Сьогодні ми поговоримо про смугах прокрутки (scrollbar), а точніше про те, як змінити їх вигляд за допомогою CSS.

CSS властивості scrollbar

З самого початку хочу зазначити, що описувані нижче CSS властивості є розширенням специфікації CSS2, введеним компаній Microsoft, реалізованим починаючи з IE 5.5

Смуга прокрутки складається з фону, повзунок і кінцевих кнопок зі стрілками.

Кнопки можуть бути як активними так і немає. Якщо скроллбар неактивний, то повзунок відсутня.

Найпростіший спосіб змінити смугу прокрутки це задати властивість scrollbar-base-color. Це властивість задає основний колір смуги прокрутки. Якщо не визначені інші властивості смуги прокрутки, то бігунок і кнопки прокрутки будуть відображатися певним вами кольором із застосуванням тривимірних ефектів. Фон смуги прокрутки буде відображатися теж цим кольором, але тільки освітленим.

Наприклад, scrollbar-base-color: lime призведе до результатами поданої на малюнку нижче.

Звичайно можна робити більш тонкі налаштування смуги прокрутки за допомогою інших CSS властивостей.

scrollbar-3dlight-color - задає колір верхньої і лівої меж смуги прокрутки, її бігунка і стрілок. scrollbar-arrow-color - задає колір стрілок на кнопках смуги прокрутки. scrollbar-darkshadow-color - задає колір "тіні", що відкидається бегунком і кнопками смуги прокрутки (колір правих і нижніх граней). scrollbar-face-color - задає основний колір бігунка і кнопок прокрутки смуги прокрутки. scrollbar-highlight-color - задає колір "освітленій" частини бігунка і кнопок прокрутки смуги прокрутки (колір лівих і верхніх їх граней). scrollbar-shadow-color - задає колір "неосвітленій" частини бігунка і кнопок прокрутки смуги прокрутки (колір правих і нижніх їх граней). Не плутати з кольором "тіні", що задається атрибутом scroll-darkshadow-color. scrollbar-track-color - задає колір фону смуги прокрутки, тієї її частини, по якій переміщається бігунок.

Як говорилося вище, кінцеві кнопки можуть бути або активними, або неактивними. Різниця між активними і неактивними кнопками полягає тільки в кольорах, що використовуються при відображенні кнопок. На активній кнопці стрілка зображується за допомогою квітів scrollbar-arrow-color (малюнок вище). На неактивній кнопці стрілка ставиться за допомогою квітів scrollbar-shadow-color і scrollbar-highlight-color. Інші елементи активної і неактивної кнопки повністю збігаються.

Окремо про тлі

Фон смуги прокрутки задається за допомогою властивості scrollbar-track-color (дивись малюнок вище). Якщо ця властивість не задана, то фон формується з двох кольорів (scrollbar-highlight-color і scrollbar-face-color), розташованих у шаховому порядку (дивись малюнок нижче).

Чому раніше працювало, а зараз немає!

У той час як з'явився IE5.5 колір скролінгу вікна браузера задавали застосовуючи властивості до елементу BODY. Однак, з виходом IE6 ці стилі не завжди працюють. Чому?

Це поведінка пов'язана з директивою DOCTYPE і її впливом на боксову модель браузера. Загалом, якщо браузер знаходиться в режимі сумісності (Quirks mode), то все OK, але якщо браузер слід стандартам (Standards mode), то стилі для скроллбар, що застосовуються до BODY не працюють. Не вдаючись в подробиці скажу, що це легко виправити, застосовуючи стилі також і до елементу HTML (дивіться приклад нижче).

Пара слів про інших браузерах

Крім Internet Explorer 5.5+ ізмененяются смуги прокрутки за допомогою CSS можуть Opera 7.23+ і Konqueror 3.1+. Однак в Opera до версії 7.5 для цього необхідно змінити налаштування браузера (Style options). Крім того, Опера дозволяє змінювати скролінг тільки, якщо вона знаходиться в режимі сумісності (Quirks mode).

-> Обговорити статтю в форумі

<- Назад к списку статей