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

Итак, наша задача состоит в изменении стиля и цвета полосы прокрутки. Реализовать нашу задачу можно путём вставки css-кода непосредственно в тег <body> кода html, вставить css-код между тегами <head></head> или же вынести css-код в отдельный файл.  В моём случае, подошёл только второй и третий вариант, кроме того, полоса прокрутки отображалась только если проставить свойства для тегов html,body. Если назначить свойства только для body, то никаких изменений не было. Отображали назначаные свойства только браузер Internet Explorer 8, Mozilla стили полосы прокрутки вообще не поддерживает, а в Опере отображается только если html поддерживается quirks mode.

Приведу варианты вставки кода, в качестве наглядных примеров, а указанные своства css рассмотрим ниже.

Вставка css-кода непосредственно в тег <body> кода html

Вставка css-кода между тегами <head></head>

css-код вынесен в отдельный файл

(Для этого прописываем строку <link rel="stylesheet" href="/style.css" type="text/css" /> между тегами <head></head>, а css-код выносим в отдельный файл, назывем его style.css и сохраняем в той же директории где находится файл index.html)

Теперь, как и обещала, рассмотрим свойства css, отвечающие за стиль полос прокрутки.

1. scrollbar-base-color - задаёт основной цвет полосы прокрутки. Все составляющие будут заданного вами цвета.

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

2. scrollbar-arrow-color - задаёт цвет стрелок

3. scrollbar-3dlight-color - задаёт цвет трёхмерных контуров, т.е. цвет верхней и левой границ полосы прокрутки, бегунка и стрелок

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

5. scrollbar-darkshadow-color - задаёт цвет тени бегунка и стрелок

6. scrollbar-shadow-color - задаёт цвет внутренней тени бегунка и стрелок

7. scrollbar-highlight-color - задаёт цвет подсветки

8. scrollbar-track-color - задаёт цвет дорожки, по которой движется бегунок

Справа вы видите результат изменения стиля полосы прокрутки, такому цветовому решению соответствует код на скриншотах выше. Думаю вы разобрались со свойствами для полосы прокрутки и информация оказалась для вас полезной.

Пожалуйста, оставьте комментарий к статье. Появились вопросы? Спрашивайте, буду рада помочь. При копировании текста указывайте автора и ссылку на статью.