Изменение дизайна полосы прокрутки на сайте

Изменение дизайна полосы прокрутки на сайте

10.04.201140913

Данное решение устарело и подходит только для IE старых версий,
посмотрите новый материал по этой теме.

Стандартный вид скроллинга на сайте – это не так плохо, но иногда можно разнообразить оформление, и поменять стиль скроллинга. Самый простой способ это сделать – это задать определенные параметры в CSS. Отсюда следует, что есть и другой способ изменения полосы прокрутки. Другой способ основывается не на обычном скроллинге, а на искусственной прокрутке, т.е. с использованием абсолютно других методов и тегов. А метод, показанный здесь, можно применить к таким элементам, которые по своей сути имеют полосу прокрутки. Это, например, BODY и TEXTAREA.

Пример и код:

Код
<style>
body, textarea {  
scrollbar-3dlight-color:#EF8700;
scrollbar-arrow-color:#FFE5C3;
scrollbar-face-color:#EF8700;
scrollbar-shadow-color:#EF8700;
scrollbar-highlight-color:#FFE5C3;
scrollbar-track-color:#FFF5E7;
}
</style>

scrollbar-3dlight-color

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

scrollbar-arrow-color

Параметр устанавливает цвет стрелок, показывающих направление.

scrollbar-base-color

Основной цвет, устанавливающий цвет самой прокрутки и кнопок направления.

scrollbar-face-color

Такое же значение, как и у предыдущего параметра, но если не указать цвет дорожки, то и дорожка будет аналогичного цвета.

scrollbar-darkshadow-color

Устанавливает цвет затемнения у скроллинга.

scrollbar-shadow-color

Параметр аналогичен предыдущему атрибуту.

scrollbar-highlight-color

Цвет подсветки у бегунка и кнопок со стрелками.

scrollbar-track-color

Устанавливает цвет дорожки для ползунка.




Сохраните в социальную сеть
Комментарии (3)
Класс, себе возьму
)))))))))))))))))))
3
Гость 11.10.2012 в 11:58Спам
у меня ничего вообще не происходит. к тегу ".box" применил "overflow: scroll;", появилась полоса, но пишу вот эти теги - и ничего
0
Гость, это работает только в IE
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт