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

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

Для оформления скролл бара нужно после тэга <HEAD> вставить код следующего типа:

<style type=text/css>
<!--
body { scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-darkshadow-color: #000000; }
//-->

Рассмотрим каждое свойство по отдельности:

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

scrollbar-highlight-color - цвет левого верхнего угла самого скролл бара.

scrollbar-shadow-color - этим цветом отображается правый нижний угол скролл бара.

scrollbar-3dlight-color - тоненькая кромка, находящаяся в левом верхнем углу, ближе к краю нежели scrollbar-highlight-color. 

scrollbar-arrow-color - определяет цвет стрелочек.

scrollbar-track-color - цвет дорожки по которой перемещается скролл бар.

scrollbar-darkshadow-color - тоненькая кромка, находящаяся в правом нихнем углу, ближе к краю нежели scrollbar-shadow-color. 

Вроде всё! Однако стоит отметить, что данные свойства поддерживают браузеры Internet Explorer 5.5 и выше. Остальные просто игнорируют свойства CSS, не выдавая никаких ошибок.

Автор статьи: Silver
Email: admin@web-silver.ru

09.07.2007 21:02

Комментарии

У вас ошибка вы забыли закрыть тег <style>
18.06.2009 17:34
в IE 8  не работает.
01.08.2009 08:03
у меня опера 9 и 10 и все не работает -  как был скрол серым таким и остался.
08.08.2009 19:49
У меня тоже в ИЕ8 не работает, аж зла не хватает! Это разве новшество??? Для своих сайтов раньше такие красивые полосы прокрутки сделал, под дизайн, так сочетались, а теперь вместо них серятина. И в Гугле Чроме тоже самое.
14.08.2009 17:56
все работает=)
15.09.2009 13:37
у кого не раюотает пробовали прописать не для body, a для html?
25.09.2009 15:22
Заработало  если прописать для  html "в scc файле",но только в IE...
У кого-ньть есть ещё идеи???
25.09.2009 21:19
Надо чтобы доктайп у вас был такой - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Тогда всё работает!!
25.09.2009 21:53
блин... СПАСИБО ТЕБЕ!!!!!!!!!!!
10.10.2009 08:29
Это только для IE, нестандартное расширение CSS2 Microsoft.
Для других браузеров - только JavaScript.
31.10.2009 04:40
<style type=text/css>

body { scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-darkshadow-color: #000000; }

</style>


И нули, соответственно поменять на желаемый цвет

Работает только с IE (от 5.5 версии)
01.11.2009 17:59
Ща попробую :-)8
X-den | 17.07.2010 08:34
Везде работает. И в опере и в ишаке.
P@n | 19.07.2010 14:55
:-s  (mask)
06.08.2010 08:47
у кого не работает после установки кода! Попробуйте почистить кеши браузеров.
01.12.2010 18:05
(yea)
26.02.2011 20:16
Нет, не робит, к сожалению. Хотел полосочки на CSS сделать, придется со скриптом возиться)
31.05.2011 09:05