`scrollbar-color și scrollbar-width` în CSS

Design Responsiv și Interfață scrollbar-color: Chrome 121, Firefox 64, Safari 26.2; scrollbar-width: Chrome 121, Firefox 64, Safari 18.2

Schimbă culorile barei de derulare și grosimea ei, cu proprietăți standard, fără pseudo-elementele ::-webkit-scrollbar.

Sintaxă CSS

scrollbar-color: #2563eb #e2e8f0;  /* cursor | pistă */
scrollbar-width: thin;
scrollbar-width: none;

Ce face `scrollbar-color și scrollbar-width`

scrollbar-color primește două culori: prima pentru partea care se trage (thumb, cursorul), a doua pentru pistă (track). scrollbar-width alege grosimea: auto, thin (mai subțire) sau none (bara e ascunsă, dar derularea funcționează).

Înainte, singura variantă în Chrome și Safari era setul de pseudo-elemente ::-webkit-scrollbar, nestandard. În Chrome 121 și versiunile următoare, dacă setezi scrollbar-color sau scrollbar-width pe un element, stilurile ::-webkit-scrollbar ale acelui element sunt ignorate.

Pe macOS și pe telefoane, barele suprapuse pot ignora parțial culorile sau grosimea, în funcție de setările sistemului.

Valori uzuale

Valoare	Descriere
`scrollbar-color: auto`	Culorile implicite ale sistemului.
`scrollbar-color: thumb track`	Două culori: cursorul barei și pista.
`scrollbar-width: auto`	Grosimea normală a sistemului.
`scrollbar-width: thin`	Bară mai subțire.
`scrollbar-width: none`	Bara nu se afișează; conținutul se derulează în continuare.

Exemple

Exemplul 1: Bară de derulare în culorile site-ului

Culorile se pun pe html pentru pagină și se moștenesc în containerele interioare.

html {
  scrollbar-color: #2563eb #f1f5f9;
}
.lista-comenzi {
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
}

Efect vizual în browser

Bara paginii are cursor albastru pe pistă gri foarte deschis. Lista de comenzi are o bară subțire, cu aceleași culori.

Exemplul 2: Carusel orizontal fără bară vizibilă

Bara e ascunsă, dar caruselul se derulează în continuare cu degetul, rotița sau tastatura.

.carusel-oferte {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}