Hoe OM - Pasgemaakte rolbalk
Leer hoe om 'n pasgemaakte skuifbalk met CSS te skep.
Pasgemaakte rolbalke
Let wel: Pasgemaakte rolbalke word nie in Firefox of in Edge, vorige weergawe 79, ondersteun nie.
Hoe om pasgemaakte rolbalke te skep
Chrome, Edge, Safari en Opera ondersteun die nie-standaard ::-webkit-scrollbar
pseudo-element, wat ons toelaat om die voorkoms van die blaaier se rolbalk te verander.
Die volgende voorbeeld skep 'n dun (10px wyd) skuifbalk, wat 'n grys baan/balkkleur en 'n donkergrys (#888) handvatsel het:
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;
}
Hierdie voorbeeld skep 'n skuifbalk met boksskadu:
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;
}
Rolbalkkiesers
Vir webkit-blaaiers kan jy die volgende pseudo-elemente gebruik om die blaaier se skuifbalk aan te pas:
::-webkit-scrollbar
die rolbalk.::-webkit-scrollbar-button
die knoppies op die rolbalk (pyltjies wat op en af wys).::-webkit-scrollbar-thumb
die sleepbare blaaihandvatsel.::-webkit-scrollbar-track
die snit (vorderingsbalk) van die skuifbalk.::-webkit-scrollbar-track-piece
die baan (vorderingsbalk) NIE deur die handvatsel bedek nie.::-webkit-scrollbar-corner
die onderste hoek van die skuifbalk, waar beide horisontale en vertikale skuifbalke ontmoet.::-webkit-resizer
die sleepbare handvatsel wat die grootte verander, wat in die onderste hoek van sommige elemente verskyn.