Hoe - Aangepaste schuifbalk
Leer hoe u een aangepaste schuifbalk maakt met CSS.
Aangepaste schuifbalken
Opmerking: aangepaste schuifbalken worden niet ondersteund in Firefox of in Edge, eerdere versie 79.
Aangepaste schuifbalken maken
Chrome, Edge, Safari en Opera ondersteunen het niet-standaard ::-webkit-scrollbar
pseudo-element, waarmee we het uiterlijk van de schuifbalk van de browser kunnen wijzigen.
In het volgende voorbeeld wordt een dunne (10px brede) schuifbalk gemaakt, die een grijze spoor-/balkkleur en een donkergrijze (888) handgreep heeft:
Voorbeeld
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
In dit voorbeeld wordt een schuifbalk met vakschaduw gemaakt:
Voorbeeld
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px
grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
Schuifbalkkiezers
Voor webkit-browsers kunt u de volgende pseudo-elementen gebruiken om de schuifbalk van de browser aan te passen:
::-webkit-scrollbar
de schuifbalk.::-webkit-scrollbar-button
de knoppen op de schuifbalk (pijlen die naar boven en naar beneden wijzen).::-webkit-scrollbar-thumb
de versleepbare schuifgreep.::-webkit-scrollbar-track
de track (voortgangsbalk) van de schuifbalk.::-webkit-scrollbar-track-piece
de baan (voortgangsbalk) NIET bedekt door het handvat.::-webkit-scrollbar-corner
de benedenhoek van de schuifbalk, waar zowel de horizontale als de verticale schuifbalken samenkomen.::-webkit-resizer
de versleepbare formaatgreep die in de benedenhoek van sommige elementen verschijnt.