Hoe te maken: aangepaste scrollbar

Leer hoe je een aangepaste scrollbar kunt maken met CSS.

Aangepaste scrollbar

Probeer het zelf uit

Probeer het zelf uit

Opmerking:Firefox of versies van Edge 79 en eerder ondersteunen geen aangepaste scrollbars.

Hoe een aangepaste scrollbar te maken

Chrome, Edge, Safari en Opera ondersteunen niet-standaard ::-webkit-scrollbar Pseudoelement dat ons toestaat het uiterlijk van de browser scrollbar aan te passen.

Het volgende voorbeeld maakt een scrollbar van 10px breedte, met een grijze spoor/kleur en een donkergrijs (#888) schuifbalk:

/* Breedte */
::-webkit-scrollbar {
  width: 10px;
}
/* Spoor */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Schuifbalk */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* Schuifbalk bij muis hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Probeer het zelf uit

Dit voorbeeld maakt een scrollbar met een schaduw effect:

Voorbeeld

/* Breedte */
::-webkit-scrollbar {
  width: 20px;
}
/* Spoor */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grijs;
  border-radius: 10px;
}
/* Schuifbalk */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

Probeer het zelf uit

Scrollbar selectie

Voor webkit-browsers kunt u de volgende pseudoelementen gebruiken om de scrollbar van de browser aan te passen:

::-webkit-scrollbar De scrollbar zelf.
::-webkit-scrollbar-button De knoppen op de scrollbar (omhoog en omlaag pijlen).
::-webkit-scrollbar-thumb De beweegbare scrollbar schuif.
::-webkit-scrollbar-track Het spoor van de scrollbar (voortgangsbalk).
::-webkit-scrollbar-track-piece Het deel van het spoor (voortgangsbalk) dat niet wordt bedekt door de schuifbalk.
::-webkit-scrollbar-corner De hoek van de scrollbar, waar de horizontale en verticale scrollbars elkaar ontmoeten.
::-webkit-resizer Draagbare aanpasbare groottegrepen die verschijnen in de hoek van sommige elementen.