scrollbar-color și scrollbar-width în 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;
}

Efect vizual în browser

Ofertele („Laptop 3.499 lei”, „Căști 199 lei”...) stau pe un rând; nu se vede nicio bară sub ele, dar rândul se derulează lateral.

Greșeli frecvente

• Combinarea scrollbar-width cu ::-webkit-scrollbar și surprinderea că stilurile webkit nu mai merg; în Chrome 121 și versiunile următoare proprietățile standard au prioritate.
• Ascunderea barei fără alt indiciu că zona se derulează; utilizatorii de pe desktop pot să nu observe conținutul ascuns. Adaugă săgeți sau lasă un card tăiat la margine.
• Culori cu contrast prea mic între cursor și pistă; bara devine greu de văzut, mai ales pentru persoanele cu vedere slabă.

Comenzi înrudite

• scrollbar-gutter: Rezervă din start locul barei de derulare, ca layout-ul să nu sară lateral când bara apare sau dispare.
• overflow (hidden, scroll, auto): Stabilește ce se întâmplă când conținutul unui element este prea mare pentru a încăpea în dimensiunile sale.
• accent-color: Personalizează instantaneu culoarea controalelor native de formular (checkbox, radio, range, progress) dintr-o singură linie.
• caret-color: Schimbă culoarea cursorului de scriere (bara care clipește) din câmpurile de text și din elementele editabile.