Generator scrollbar CSS personalizat

Exemple de bare de derulare

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Bara paginii în culorile site-ului Standard pe html pentru Firefox, ::-webkit-scrollbar global pentru Chrome, Edge și Safari.

@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: #2563eb #dbeafe;
  }
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #dbeafe; }
::-webkit-scrollbar-thumb {
  background-color: #2563eb;
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

Listă cu bară subțire Doar proprietățile standard: cel mai scurt cod, fără colțuri și fără hover.

.lista {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 transparent;
}

Carusel fără bară vizibilă Bara dispare, derularea cu degetul, rotița sau tastatura rămâne.

.carusel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carusel::-webkit-scrollbar { display: none; }

Fără salt când apare bara scrollbar-gutter rezervă locul barei, ca textul să nu se mute când conținutul crește.

.panou {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

Cum folosești generatorul de scrollbar

Alege unde se aplică: pe un element (o cutie derulabilă) sau pe toată pagina.
Alege ce reguli generez: standard pentru Firefox plus -webkit- pentru restul, doar standard sau doar ::-webkit-scrollbar.
Setează scrollbar-width (auto, thin, none), lățimea, culorile șinei, cursorului și cursorului la hover, colțurile și marginea din jurul cursorului.
Derulează cutia din previzualizare. Sub ea vezi ce reguli folosește browserul tău. Codul se generează local, fără să fie trimis la server.

Două seturi de reguli

Proprietățile standard sunt scrollbar-color (culoarea cursorului, apoi a șinei) și scrollbar-width. Le înțeleg Firefox, Chrome și Edge începând cu versiunea 121 și versiunile recente de Safari. Sunt simple, dar nu au colțuri rotunjite, lățime exactă în pixeli sau culoare la hover.

Pseudo-elementele ::-webkit-scrollbar sunt nestandard, dar merg în Chrome, Edge, Safari și Opera și permit tot: lățime, colțuri, hover. Firefox nu le citește.

Capcana din Chrome 121+

Din Chrome 121, dacă un element are scrollbar-color sau scrollbar-width cu altă valoare decât auto, regulile ::-webkit-scrollbar ale lui sunt ignorate. De aceea varianta „ambele” pune proprietățile standard într-un bloc care se aplică doar unde ::-webkit-scrollbar nu există:

@supports not selector(::-webkit-scrollbar) {
  .zona-derulabila {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f1f5f9;
  }
}

Marginea din jurul cursorului se face cu border: 3px solid transparent și background-clip: padding-box: culoarea rămâne doar în interior și cursorul pare mai subțire decât șina. Pe telefoane și pe macOS cu bare suprapuse, sistemul poate ignora o parte din stiluri.

Întrebări frecvente

Pot ascunde bara, dar să păstrez derularea?

Da: scrollbar-width: none și ::-webkit-scrollbar { display: none; }. Asigură-te că utilizatorul își dă seama că zona se derulează.

Unde pun codul pentru toată pagina?

Proprietățile standard pe html. Regulile ::-webkit-scrollbar fără selector în față se aplică tuturor barelor din pagină.