Изменить полосу прокрутки на CSS

Вы задумывались о том, как изменить полосу прокрутки на сайте? Я задумывался, так как иногда хочется, чтобы абсолютно все соответствовало гамме сайта, даже полоса прокрутки.
В этой статье попробуем изменить цвет прокрутки для вашего сайта, используя только таблицу стилей.
Но, к сожалению, не все браузеры поймут и смогут выполнить ваши требования, которые вы пропишите в CSS. Эти стили подойдут только для тех браузеров, которые созданы по образу и подобию Google Chrome, OPERA и Internet Explorer. Да, вы правильно поняли, Mozilla Firfox останется в сторонке .

Полоса прокрутки для Internet Explorer

html
{
scrollbar-arrow-color: /*1- цвет стрелки*/;
scrollbar-track-color: /* 2 – цвет подложки */;
scrollbar-face-color: /* 3- цвет самой полосы */;
scrollbar-shadow-color: / * 4 – цвет разделяющей полосы */;
scrollbar-highlight-color: / * 4 – цвет разделяющей полосы */;
scrollbar-3dlight-color: /* 5- цвет внешних границ полосы */;
scrollbar-darkshadow-color: /* 5- цвет внешних границ полосы */;
}

СХЕМА ПАРАМЕТРОВ:

1. scrollbar-arrow-color – цвет стрелки.
2. scrollbar-track-color – цвет подложки.
3. scrollbar-face-color – цвет самой полосы.
4.  scrollbar-shadow-color
   scrollbar-highlight-color - цвет разделяющей полосы
5. scrollbar-3dlight-color
   scrollbar-darkshadow-color  - цвет внешних границ полосы

Пример:

Код нужно вставит в CSS файл

html
{
scrollbar-arrow-color: #000; /* 1 – цвет стрелки */;
scrollbar-track-color: #008000; /* 2 – цвет подложки */;
scrollbar-face-color: #32CD32; /* 3 - цвет самой полосы */;
scrollbar-shadow-color: #000; /* 4 – цвет разделяющей полосы */;
scrollbar-highlight-color: #000; /* 4 - цвет разделяющей полосы */;
scrollbar-3dlight-color: #32CD32; /* 5 - цвет внешних границ полосы */;
scrollbar-darkshadow-color: #32CD32; /* 5 - цвет внешних границ полосы */;
}

Результат:

Полоса прокрутки для Google Chrome

::-webkit-scrollbar { /* 1 - скроллбар */ }
::-webkit-scrollbar-button { /* 2 - кнопка */ }
::-webkit-scrollbar-track { /* 3 - трек */ }
::-webkit-scrollbar-track-piece { /* 4 - видимая часть трека */ }
::-webkit-scrollbar-thumb { /* 5 - ползунок */ }
::-webkit-scrollbar-corner { /* 6 - уголок */ }
::-webkit-resizer { /* 7 - изменение размеров */ }

СХЕМА ПАРАМЕТРОВ:

1. webkit-scrollbar - скроллбар
2. webkit-scrollbar-button - кнопка
3. webkit-scrollbar-track - трек
4.  webkit-scrollbar-track-piece  - видимая часть трека
5. webkit-scrollbar-thumb - ползунок
6. webkit-scrollbar-corner – уголок
7. webkit-resizer - изменение размеров

Различные состояния для полосы прокрутки

Эти псевдо селекторы позволяют точнее выбирать разные части полосы прокрутки для различного состояния. Описание смотрите на блоге WebKit (на англ. ).

:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive

Пример:

Код нужно вставить в CSS файл

::-webkit-scrollbar{ width: 22px; /* 1 - вертикальный скроллбар */}
::-webkit-scrollbar:horizontal{ height: 22px; /* 1 - горизонтальный скроллбар */}
::-webkit-scrollbar-button {background: #008000; /* 2 - кнопка */}
::-webkit-scrollbar-track {background: #008000;/* 3 - трек */}
::-webkit-scrollbar-track-piece { background: #32CD32; /* 4 – видимая часть трека */ }
::-webkit-scrollbar-thumb {background: #008000; border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /* 5 - ползунок */}

Результат:

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

8 Ответов на комментарий - Изменить полосу прокрутки на CSS

1. user4417

   24.11.2016 в 19:21

   Здравствуйте,
   обновилась мозила до 50, а в ней проблема с полосой прокрутки,
   обычно держу мышь крайне вправо и щелкаю не глядя,
   каждый щелчок прокручивает страницу на длину монитора (вверх или вниз),
   теперь же куда кликну – туда бегунок и улетает, и с ним вся страница,
   приходится переводить взгляд на полосу, цеплять бегунок мышью и медленно таскать вдоль страницы.
   Неудобно – это не то слово!!!!!!!!!!
   Как можно это настроить?
2. Степан => автор блога

   24.11.2016 в 22:14

   
3. user4417

   24.11.2016 в 23:35

   А! нашла решение, это был баг 1260067,
   и надо было упомянуть, что это для линукса,
   очень может быть, что для винды такой проблемы нет… не знаю, я туда несколько лет не заглядывала.
4. Степан => автор блога

   25.11.2016 в 08:54

   И как Вы решили проблему? Может кому-то пригодится.
5. user4417

   25.11.2016 в 15:02

   Да, действительно, что это я…
   Пожалуйста, сотрите белиберду из предыдущего поста,
   поставьте туда вот это:
   в файл gtk-3.0/settings.ini нужно вписать gtk-primary-button-warps-slider=false
6. Тимур

   04.02.2017 в 21:55

   Автор, добрый вечер.
   Opera ещё в 2014-ом использовала движок WebKit, когда они её перевели на него – не знаю. Но сам проверь псевдоклассами – -webkit- любой стиль применив в консоли, сам увидишь результат.
   Так что Опера больше 2-х лет ТОЛЬКО поддерживает это всё. Да и об этом на форумах многих написано, я ещё в начале 2014-го читал что опера перешла полностью на WebKit.
7. Степан => автор блога

   07.02.2017 в 09:35

   Здравствуйте, Тимур!
   Да, вы правы, я обновил браузер ОПЕРА и действительно, все ок.
   Спасибо, что поправили меня.
   Удачи!
8. Тимур

   08.02.2017 в 14:12

   и вам ))

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: css, для сайта, эффекты для сайта