Scrollbar-stijl

Gebruik de eigenschappen scrollbar-width en scrollbar-color om scrollbalken vorm te geven.

Bramus

Invoering

Vanaf Chrome versie 2 is het mogelijk om scrollbalken te stylen met de pseudo-elementen ::-webkit-scrollbar-* . Deze aanpak werkt prima in Chrome en Safari, maar is nooit gestandaardiseerd door de CSS Working Group.

Wat wél gestandaardiseerd is, zijn de eigenschappen scrollbar-width en scrollbar-color , onderdeel van de CSS Scrollbars Styling Module Level 1 Specification . Deze eigenschappen worden ondersteund vanaf Chrome 121.

Browser Support

• 121
• 121
• 64
• 26.2

Source

Schuifbalken 101

Anatomie van een schuifbalk

Een schuifbalk bestaat minimaal uit een spoor en een schuifknop. Het spoor is het gebied waarbinnen de schuifknop kan bewegen. Het spoor vertegenwoordigt de volledige schuifafstand. De schuifknop geeft de huidige positie binnen het schuifgebied weer. Tijdens het scrollen beweegt de schuifknop binnen het spoor. De schuifknop is vaak ook versleepbaar.

Een schuifbalk kan echter uit meer onderdelen bestaan ​​dan alleen de schuifknop en de scrollpositie. Zo kan een schuifbalk bijvoorbeeld een of meer knoppen hebben om de scrollpositie te verhogen of te verlagen. De onderdelen waaruit een schuifbalk bestaat, worden bepaald door het onderliggende besturingssysteem.

Illustratie van de onderdelen waaruit een schuifbalk bestaat. De afbeelding links toont een zeer eenvoudige schuifbalk met alleen een spoor en een schuifknop. De schuifbalk rechts heeft ook knoppen.

Klassieke en overlay-scrollbalken

Voordat we kijken naar hoe je scrollbalken kunt stylen, is het belangrijk om het verschil tussen twee soorten scrollbalken te begrijpen.

Schuifbalken over elkaar heen

Overlay-scrollbalken zijn zwevende scrollbalken die bovenop de onderliggende inhoud worden weergegeven. Ze zijn standaard niet zichtbaar, maar alleen wanneer je actief aan het scrollen bent. Om de onderliggende inhoud zichtbaar te houden, zijn ze vaak semi-transparant, maar dat is afhankelijk van het besturingssysteem. Tijdens het scrollen kan hun grootte ook variëren.

Illustratie van een browser met een scrollbalk die over de inhoud heen ligt. De scrollbalk overlapt de inhoud; de schuifknop is gedeeltelijk transparant.

Klassieke schuifbalken

Klassieke schuifbalken zijn schuifbalken die in een speciale schuifbalkgutter zijn geplaatst. De schuifbalkgutter is de ruimte tussen de binnenrand van het scherm en de buitenrand van de opvulling. Deze schuifbalken zijn meestal ondoorzichtig (niet transparant) en nemen wat ruimte in beslag van de aangrenzende inhoud.

Illustratie van een browser met een klassieke scrollbalk. De scrollbalk is naast de inhoud geplaatst in een eigen, afgebakend gebied; de beschikbare breedte van de inhoud is kleiner in vergelijking met de beschikbare breedte wanneer overlay-scrollbalken worden gebruikt.

De eigenschappen scrollbar-color en scrollbar-width

Het kleuren van schuifbalken met de scrollbar-color

Met de eigenschap scrollbar-color kunt u het kleurenschema van de schuifbalken wijzigen. De eigenschap accepteert twee <color> `-waarden. De eerste <color> `-waarde bepaalt de kleur van de schuifknop en de tweede de kleur die voor het spoor wordt gebruikt.

.scroller {
  scrollbar-color: hotpink blue;
}

Bij gebruik van een overlay-scrollbalk heeft de kleur van de track standaard geen effect. Zodra je echter met de muis over de scrollbalk beweegt, wordt de track zichtbaar.

Demo: Scrollbalken stylen: scrollbar-color

Om de standaardweergave van het besturingssysteem te gebruiken, stelt u de waarde in op auto .

De breedte van de schuifbalk wijzigen met scrollbar-width

Met de eigenschap scrollbar-width kunt u een smallere schuifbalk kiezen, of de schuifbalk zelfs volledig verbergen zonder dat dit de scrollfunctionaliteit beïnvloedt.

De geaccepteerde waarden zijn auto , thin en none .

• auto : De standaard breedte van de schuifbalk zoals die door het platform wordt geleverd.
• thin : Een dunne variant van de scrollbalk die door het platform wordt aangeboden, of een aangepaste scrollbalk die dunner is dan de standaard scrollbalk van het platform.
• none : Verbergt de scrollbalk effectief. Het element blijft echter wel scrollbaar.

Het is niet mogelijk om een <length> zoals 16px te gebruiken als waarde voor scrollbar-width .

.scroller {
  scrollbar-width: thin;
}

Bij gebruik van een overlay-scrollbalk wordt de schuifknop alleen weergegeven wanneer u actief door het scrollbare gebied scrollt.

Demo: Scrollbalken stylen: scrollbar-width

Ondersteuning voor oudere browserversies

Om tegemoet te komen aan browserversies die scrollbar-color en scrollbar-width niet ondersteunen, is het mogelijk om zowel de nieuwe eigenschappen scrollbar-* als ::-webkit-scrollbar-* te gebruiken.

.scroller {
    --scrollbar-color-thumb: hotpink;
    --scrollbar-color-track: blue;
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 10px;
}

/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    .scroller {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
    .scroller::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    .scroller::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    .scroller::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}

Demo: Scrollbars stylen met scrollbar-* en terugvallen op ::-webkit-scrollbar-*

Houd er rekening mee dat wanneer u de width of height van ::-webkit-scrollbar instelt, er altijd een overlay-scrollbalk wordt weergegeven, waardoor deze in feite een klassieke scrollbalk wordt.

Om de illusie te behouden, kun je ervoor kiezen om de kleuren alleen te laten veranderen wanneer je met de muis over de schuifregelaar beweegt.

.scroller::-webkit-scrollbar-thumb {
    background: transparent;
}
.scroller::-webkit-scrollbar-track {
    background: transparent;
}
.scroller:hover::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color-thumb);
}
.scroller:hover::-webkit-scrollbar-track {
    background: var(--scrollbar-color-track);
}

.scroller:hover {
    --fix: ; /* This custom property invalidates styles on hover, thereby enforcing a style recomputation. This is needed to work around a bug in Safari. */
}

Demo: Scrollbars stylen met scrollbar-* en terugvallen op ::-webkit-scrollbar-* , waarbij de kleuren van ::-webkit-scrollbar-* alleen worden toegepast bij hover.