scrollbar-color

Изменяем цвет полосы прокрутки

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

scrollbar-color позволяет изменять цвета полосы прокрутки и ползунка.

Если используете MacOS, вам нужно в настройках ОС поставить галочку «всегда отображать скроллбар», иначе полоса прокрутки будет отображаться некорректно.

Пример

Секция статьи "Пример"

Изменим цвет ползунка и самой полосы скроллбара.

        
          
          html {  scrollbar-color: #2E9AFF #F498AD;}
          html {
  scrollbar-color: #2E9AFF #F498AD;
}

        
        
          
        
      
Открыть демо в новой вкладке
Пример с несколькими разными скроллбарами
Пример того, как это выглядит в Firefox

Как пишется

Секция статьи "Как пишется"

Свойство принимает два цвета — первый задаёт цвет ползунка, а второй — цвет фона контейнера. Указать только один цвет не получится (даже если хотите сделать цвет фона и ползунка одинаковым) — будет синтаксическая ошибка. Можно указывать любые корректные значения цвета.

Вот так можно задать ползунку цвет #2E9AFF , а фону — #F498AD.

        
          
          html {  scrollbar-color: #2E9AFF #F498AD;}
          html {
  scrollbar-color: #2E9AFF #F498AD;
}

        
        
          
        
      

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

Открыть демо в новой вкладке
Несколько разных скроллбаров
Пример того, как несколько разных скроллбаров выглядят в Firefox

Обратите внимание, что скроллбар с жёлтым фоном создаёт вертикальную и горизонтальную полосу, а с фиолетовым — только вертикальную. Это связано с тем, что для блока-контейнера (жёлтый фон) мы задали overflow: scroll, а для внутреннего блока — overflow-y: scroll. Поэтому у внутреннего блока появился фон только для вертикальной прокрутки, а для контейнера — сразу для вертикальной и горизонтальной.