::-webkit-scrollbar

::-webkit-scrollbar и родственные ему псевдоэлементы — это нестандартный способ стилизовать полосу прокрутки в браузерах на движках WebKit/Blink (Chrome, Edge, Safari, Opera). Можно менять толщину, цвета, скругления и состояния отдельных частей скроллбара. Спецификации у этих селекторов нет, поведение и поддержка могут меняться.

        
          
          /* Общая ширина скроллбара */*::-webkit-scrollbar {  width: 12px;   /* вертикальный */  height: 12px;  /* горизонтальный */}/* Трек (фон) */*::-webkit-scrollbar-track {  background: #1e1f22;}/* Ползунок */*::-webkit-scrollbar-thumb {  background: #6b7280;  border-radius: 8px;  border: 3px solid #1e1f22; /* создаём «внутренний отступ» */}/* Состояние при наведении */*::-webkit-scrollbar-thumb:hover {  background: #9ca3af;}
          /* Общая ширина скроллбара */
*::-webkit-scrollbar {
  width: 12px;   /* вертикальный */
  height: 12px;  /* горизонтальный */
}

/* Трек (фон) */
*::-webkit-scrollbar-track {
  background: #1e1f22;
}

/* Ползунок */
*::-webkit-scrollbar-thumb {
  background: #6b7280;
  border-radius: 8px;
  border: 3px solid #1e1f22; /* создаём «внутренний отступ» */
}

/* Состояние при наведении */
*::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

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

        
          
          <div class="scrollbox">  Очень длинный контент... Очень длинный контент... Очень длинный контент...</div>
          <div class="scrollbox">
  Очень длинный контент... Очень длинный контент... Очень длинный контент...
</div>

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

        
          
          .scrollbox {  max-height: 180px;  overflow: auto;  padding: 12px;  background: #111216;  color: #fff;  border-radius: 12px;}
          .scrollbox {
  max-height: 180px;
  overflow: auto;
  padding: 12px;
  background: #111216;
  color: #fff;
  border-radius: 12px;
}

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

Семейство нестандартных псевдоэлементов:

• ::-webkit-scrollbar — вся полоса прокрутки (задаёт размеры);
• ::-webkit-scrollbar-thumb — ползунок;
• ::-webkit-scrollbar-track — трек (фон);
• ::-webkit-scrollbar-track-piece — участок трека, не занятый ползунком;
• ::-webkit-scrollbar-button — кнопки со стрелками;
• ::-webkit-scrollbar-corner — уголок при одновременных осях;
• ::-webkit-resizer — «хваталка» для изменения размера в углу.

Используются как обычные псевдоэлементы:

        
          
          .container::-webkit-scrollbar-thumb { background: #888; }
          .container::-webkit-scrollbar-thumb { background: #888; }

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

• Это WebKit/Blink‑специфика. В Firefox эти селекторы не работают. Для Firefox есть стандартные свойства scrollbar-width и scrollbar-color.
• Рендер и доступные свойства могут отличаться между браузерами и версиями. Считайте это «best‑effort» API без гарантий стабильности.

💡 Избегайте слишком толстых/ярких скроллбаров — они могут мешать контенту.
💡 Чтобы создать «зазор» внутри ползунка, используйте border цвета трека.
💡 Проверьте тёмную/светлую темы и контрастность, особенно у thumb и track.
💡 Для кроссбраузерности комбинируйте подходы:

• в Firefox — scrollbar-width/scrollbar-color;
• в WebKit/Blink — семейство ::-webkit-scrollbar.