Особенность цвета полос прокрутки по умолчанию в том, что он скучный и безобразный — обычно этот цвет серый. Не было бы неплохо изменить этот цвет, чтобы лучше соответствовать общей теме вашего сайта? К счастью, для этого можно использовать каскадные таблицы стилей и JavaScript!
Использование CSS
В CSS просто добавьте приведенные ниже определения вверху страницы, чтобы настроить цвета полосы прокрутки браузера. Самое замечательное в CSS заключается в том, что браузеры, которые его не понимают, просто пропустят его. Рисование полосы прокрутки поддерживается IE5.5 и выше.
<style>
<!--
BODY{
scrollbar-face-color:#8080FF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#DDDDFF;
scrollbar-shadow-color:'';
scrollbar-highlight-color:'';
scrollbar-3dlight-color:'';
scrollbar-darkshadow-Color:'';
}
->
</ Стиль>
Спорим, вы никогда не понимали, что полоса прокрутки состоит из такого количества компонентов! Первые три определения являются наиболее важными, поскольку они соответствуют наиболее видимым аспектам полосы прокрутки. Не стесняйтесь поиграть с другими определениями, чтобы увидеть, на что они влияют.
Использование JavaScript
Вы также можете использовать JavaScript для динамического изменения цвета полосы прокрутки. Это полезно, когда вы хотите сделать что-то необычное, например, чередовать полосу прокрутки от одного цвета к другому. JavaScript-перевод CSS-определений полосы прокрутки:
document.body.style.scrollbarFaceColor="colorname"
document.body.style.scrollbarArrowColor="colorname"
document.body.style.scrollbarTrackColor="colorname"
document.body.style.scrollbarShadowColor="colorname"
document.body.style.scrollbarHighlightColor="colorname"
document.body.style.scrollbar3dlightColor="colorname"
document.body.style.scrollbarDarkshadowColor="colorname"
Вот пример «мигающей» полосы прокрутки, которая меняет цвет каждую секунду:
<script>
var mode = 0
function blinkscroll () {
если (режим == 0)
document.body.style.scrollbarFaceColor =»синий»
еще
document.body.style.scrollbarFaceColor =»зеленый»
Режим = (режим == 0)? 1: 0
}
setInterval ( «blinkscroll ()», 1000)
</ Скрипт>
Более сложный пример манипулирования полосой прокрутки с использованием JavaScript, называемый onMouseover Scrollbar Effect , написан Светлиным Стаевым . Это меняет цвета полосы прокрутки, когда вы перемещаете указатель мыши вверх и в сторону от нее.
Я вижу, что все больше и больше сайтов настраивают цвет полосы прокрутки, чтобы гармонировать с остальными сайтами. Я надеюсь, что вы найдете эти советы полезными, чтобы помочь вам сделать то же самое!