cssor.ru - Сайт о CSS и верстке сайтов, в помощь веб разаботчикам.

Красивая полоса прокрутки сайта на CSS

Дата: 23.09.2008
Scrollbar

Стандартные полосы прокрутки (Scrollbar) на сайтах это скучно. Не так ли? Нет это совсем не так :), они (стандартные полосы прокрутки) не “мазолят” глаза, да и безобразного в них ничего нет. Но иногда под стиль сайта имеет смысл изменить стандартный Scrollbar. Не каждому сайту подойдет, так что не стоит этим злоупотреблять. Но все же знать как это делается я думаю нужно.

Для начала немного теории, расскажу и покажу какие селекторы и свойства отвечают за полосу прокрутки, а потом перейдем к практике.

scrollbar-face-color:

Определяет основной цвет ползунка и кнопок полосы прокрутки.

scrollbar-highlight-color:

Определяет внешний (левые и верхние грани) цвет ползунка и кнопок полосы прокрутки.

scrollbar-shadow-color:

Определяет правый и нижний цвет части бегунка и кнопок полосы прокрутки.

scrollbar-darkshadow-color:

Определяет цвет внешних правой и нижней граней ползунка и кнопок полосы прокрутки.

scrollbar-3dlight-color:

Определяет левый и верхний цвет части бегунка и кнопок полосы прокрутки.

scrollbar-arrow-color:

Определяет цвет стрелочек на кнопках полосы прокрутки.

scrollbar-track-color:

Определяет цвет фона под ползунком.


А теперь покажу на рисунке, чтобы стало понятно все выше написанное:

Свойства полосы прокутки

Ну и наконец пример CSS кода с применением всего выше описанного:

html, body { 
scrollbar-face-color: #C84747; 
scrollbar-highlight-color: #60EA36;
scrollbar-shadow-color: #4A56ED; 
scrollbar-darkshadow-color: #000000; 
scrollbar-3dlight-color: #DB36EA; 
scrollbar-arrow-color: #FFFFFF; 
scrollbar-track-color: #D6D6D6; 
}

Экспериментируйте с цветами и будет вам счастье :).

29.09.2008

Насколько я знаю, такое решение пригодно только в IE, поправьте если я не прав)))

29.09.2008

Для IE, Opera и Konqueror.

28.01.2009

Вроде как не во всех браузерах работает

08.02.2009

А как обратно вернуть?

25.02.2009

А как такое реализовать в Firefox?

25.02.2009

Pavlik, никак. Это работает только в IE, Opera и Konqueror.

25.02.2009

т.е. в Firefox'e ничего подобного реализовать нельзя?

26.02.2009

Pavlik, именно так.

27.02.2009

жаль, спасибо за ответы!

22.03.2009

У меня в эксплоере не работает

23.03.2009

Дмитрий, значит что-то делаете неправильно.

27.03.2009

Жаль, но для ФФ не подходит(

16.04.2009

В фф можно реализовать средствами js, используя, к примеру, jScrollPane

05.05.2009

amnesia спасибо за подсказку

07.05.2009

это системный элемент и нечего его раскрашивать....незря он в лисе не раскрашивается...не запутывайте пользователя..

30.05.2009

У меня всё отлично работает в Opere,IE, и как-то в Mozille!

07.06.2009

O_0 нифига дела,вообщем то,этот скролбар нафиг не надо украшать

07.06.2009

правильно мыслишь)))

13.06.2009

Вы забыли упомянуть, что такой код не пройдёт валидацию.

19.06.2009

Жаль в Хроме не работает.. =(
Стандартная полоса прокрутки очень сильно может партачить дизайн на сайтах.

А можно как нить на неё имагу заскинить?..

20.07.2009

Для супорта во всех браузерах надо юзать js, самый легкий вариант плагин для jq

23.07.2009

Мое мнение тулбарры устарели..

25.07.2009

Блин, а что же делать тем, кто работает исключительно с Огненным Лисом? Нам бы тоже хотелось всяких рюшечек. =)
2 amnesia, а как это сделать, можно на пальцах объяснить?

28.07.2009

Я думаю,принципиально ничего нового,как говорится тот же вася но в других шароварах

03.09.2009

Какие-то не очень красивые.Вот еслиб по типу флеш с эфектами,я думаю намного лучше смотрелось

06.01.2010

Да, в файрфоксе не работает. А жаль, т.к он по моему самый удобный.

Нормально, у меня работает везде. Спасибо за туториал.

20.05.2010

В целом неплохо. Интересно было почитать

08.10.2010

А как сделать свойство scrollbar валидным?

13.10.2010

всегда интересовало как ето сделать, после того как когда-то давно увидел на забугорном сайте! Теперь буду експерементировать из цветами, хоть както отлючусб от других сайтов :)

23.10.2010

Хорошая идея! попробую...

07.11.2010

Тоже буду экспериментировать.

25.01.2011

Как не работай всегда найдётся козёл, который работает меньше, а получает больше. http://forexsw.com/

14.03.2011

вот здесь пример как работает www.vipoptica.ru

23.05.2011

http://www.noxit.ru/jquery_scrollbar.html ибо вам в помощь...

24.07.2011

В целом неплохо. А в хроме будет работать?

05.08.2011

Надо бы испробывать

13.08.2011

Чегой-то у меня плохо получается

20.10.2011

Полоса прокрутки нужна только во фреймах, а они отстой

22.12.2011

Я гдето на яве или на аяксе видел для всех браузеров, ни кто не встречал?

23.12.2011

и этот блог умер

24.12.2011

хороший ресурс был)

20.03.2012

Я действительно впечатлен тем, что есть так много на эту тему, которая была раскрыта, и вы сделали это так хорошо, с таким классом. Хорошо, который вы, человек! Спасибо за сообщение о шинах.Miami Exotic Dancers