Як змінити колір scroll-bar'у?

В цій статті ми навчимось змінювати колір scroll-bar'у в браузері так, щоб ви могли повністю налаштовувати кольорову схему scroll-bar'у під дизайн вашого сайту.

Scroll-bar - це полоса прокрутки, яка використовується, коли вміст екрану не поміщається у вікні браузера. Оформлення scroll-bar'у можна повністю співставити з кольоровою схемою вашого сайту. Але слід мати на увазі, що не всі сучасні браузери підтримують цю властивість. Ці браузери не видають ніяких помилок і просто ігнорують вказані властивості CSS, тому ви без застережень можете включати нижче наведений код в свої сторінки. Так, наприклад, браузер Mozilla Firefox не дає змоги змінити колір scroll-bar'у.

Для задання оформлення scroll-bar'у необхідно прописати таблицю стилів, таким чином:

<style type="text/css">
BODY {
scrollbar-face-color: #006000;
scrollbar-highlight-color: #999999;
scrollbar-shadow-color: #666666;
scrollbar-3dlight-color: #666666;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #e0efe0;
scrollbar-darkshadow-color: #666666;
}
</style>

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

* scrollbar-face-color — задає основний колір scroll-bar'у, а також колір двох кнопочок зі стрілочками. Якщо Ви навіть не вкажете властивість scrollbar-track-color, то колір трека визначиться автоматично, як більш яскравий, ніж колір scrollbar-face-color.

* scrollbar-highlight-color — встановлює яскравий колір підсвітки, яка створює ефект об'ємності, тобто колір для освіченої частини scroll-bar'у і кнопок. Цим кольором відображається лівий верхній кут самого scroll-bar'у і двох кнопочок (коли вони не натиснуті).

* scrollbar-shadow-color — встановлює темний колір підсвітки, який створює ефект об'ємності, тобто колір, для тіньової частини scroll-bar'у і кнопочок (колір тіні). Цим кольором відображається правий нижній кут самого scroll-bar'у і двох кнопочок (коли вони не натиснути).

* scrollbar-3dlight-color — встановлює колір падаючого кольору для створення трьохмірності scroll-bar'у. Це виражається в кольорі тіньової кромки, яка знаходиться в лівих верхніх кутах, ближче до краю, ніж scrollbar-highlight-color.

* scrollbar-arrow-color — визначає колір двох маленьких стрілочок, які знаходяться на кнопочках крайніх позицій scroll-bar'у.

* scrollbar-track-color — задає колір треку, тобто доріжки прокрутки, по якій і переміщається сам scroll-bar.

* scrollbar-darkshadow-color — визначає колір відкинутого кольору для створення трьохмірності scroll-bar'у. Це виражається в кольорі тоненької кромки, яка знаходиться в правих нижніх кутах, ближче до краю, ніж scrollbar-shadow-color.