scrollbar-color

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

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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