CSS-generator för rullningslist

Moderna standardegenskaper (2023 och senare)

/* Applies to the element that scrolls */
html {
  scrollbar-width: thin;           /* auto | thin | none */
  scrollbar-color: #4f46e5 #e5e7eb; /* thumb track */
}

Webbläsarstöd (2024):

• scrollbar-width: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-color: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-gutter: stable: Chrome 94+, Safari 14+, Firefox 97+. Reserverar utrymmet för rullningslisten även när den inte behövs och förhindrar därmed layoutförskjutning.

Webkit-pseudoelement (Chrome, Safari, äldre Edge)

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3730a3;
}

Finare kontroll. width anger bredden på den vertikala rullningslisten; height anger höjden på den horisontella. Lägg till båda för behållare som kan rullas i båda riktningarna.

Kaskadera de två metoderna

Ange först de moderna reglerna, sedan webkit som en förbättring för webbläsare som renderar båda:

.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: #4f46e5 #e5e7eb;
}
.scroll-area::-webkit-scrollbar       { width: 8px; }
.scroll-area::-webkit-scrollbar-track { background: #e5e7eb; }
.scroll-area::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 4px;
  border: 2px solid #e5e7eb;
}

Firefox följer bara de moderna scrollbar-*-reglerna. Chrome och Safari följer webkit-reglerna (som åsidosätter de moderna, så att beteendet blir enhetligt).

scrollbar-gutter förhindrar att innehållet flyttas

Utan ett reserverat utrymme flödar innehållet om när en rullningslist visas (vanligt i dynamiska listor). Lösning:

html { scrollbar-gutter: stable; }
/* or */
html { scrollbar-gutter: stable both-edges; }

Platsen för rullningslisten reserveras oavsett om innehållet rullar eller inte. both-edges lägger till ett motsvarande utrymme på motsatt sida så att innehållet förblir visuellt centrerat.

Dölj rullningslister helt

.no-scrollbar {
  scrollbar-width: none;           /* Firefox */
}
.no-scrollbar::-webkit-scrollbar { display: none; }  /* Chrome, Safari */

Var försiktig: att dölja rullningslisten hindrar användare från att se att innehållet går att rulla. Använd det bara med en tydlig indikator (pilar, sidprickar) eller när rullningsbeteendet är uppenbart av sammanhanget (horisontella karuseller, chatthistorik).

Att tänka på för mobil

På iOS och Android visas rullningslister bara ett ögonblick under rullningen. Din anpassade CSS för rullningslisten tillämpas ändå, men användarna ser den kanske aldrig i mer än en sekund. Utforma därefter: satsa inte för mycket på visuella detaljer som sällan syns.

Tillgänglighet

• Kontrast: reglaget mot spåret bör uppnå 3:1 för icke-textkontrast (WCAG 1.4.11).
• Bredd: tunna rullningslister kan vara svåra att greppa med musen, särskilt för användare med motoriska nedsättningar. Normal bredd är ett säkrare standardval.
• Ta aldrig bort rullningslisten i rullbara områden utan att erbjuda ett annat sätt att rulla. Användare som förlitar sig på rullningslisten fastnar annars.