HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

«
»

Scrollbar CSS. Кроссбраузерная стилизация скроллбаров.

В этой шпаргалке рассмотрим, как можно стилизовать scrollbar.

Сначала вкратце расскажу, как можно стилизовать скроллы с помощью css. Только, к сожалению, оно работает только (о чудо!) в IE. Вот так вот, ИЕ впереди планеты всей :D

Вобщем, вот стили, которые разукрашивают скроллбар (работает только в ie):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

scrollbar-base-color:#Цвет; /* Задает основной цвет для скролла */

/* И более тонкие настройки: */
 
scrollbar-3dlight-color:#Цвет; /*задает цвет верхней и левой границ полосы прокрутки, ее бегунка и стрелок*/

scrollbar-arrow-color:#Цвет; /*задает цвет стрелок на кнопках полосы прокрутки*/

scrollbar-darkshadow-color:#Цвет; /*задает цвет "тени", отбрасываемой бегунком и кнопками полосы прокрутки (цвет правых и нижних границей)*/

scrollbar-face-color:#Цвет; /*задает основной цвет бегунка и кнопок прокрутки полосы прокрутки*/

scrollbar-highlight-color:#Цвет; /*задает цвет "освещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет левых и верхних их граней)*/

scrollbar-shadow-color:#Цвет; /*задает цвет "неосвещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет правых и нижних их граней). Не путать с цветом "тени", задаваемым атрибутом scroll-darkshadow-color*/

crollbar-track-color:#Цвет; /*задает цвет фона полосы прокрутки, той ее части, по которой перемещается бегунок*/

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

Вот ссылка на сайт, где есть скрипт, которые эмулирует скроллы: hesido.com/web.php?page=customscrollbar

Библиотечка называется fleXscroll. Скачиваете архив с примерами c сайта или отсюда: flexcrolljs v.1.9.4. Разбираете их, ставите себе на сайт, и вауля, красивый скролл у вас на сайте готов.

Метки: ,

Запись опубликована 10.12.2009 в 23:37 и размещена в рубрике css, java script. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.

Комментарии (2) на “Scrollbar CSS. Кроссбраузерная стилизация скроллбаров.”

Оставить комментарий

Для вставки кода используйте <code> ... </code>.



Самые комментируемые

Облако тегов

Нет тегов найденных по заданным критериям.

Опрос