Schuifbalk - CSS-trucs | CSS Almanac 2025

Een korte geschiedenis van het stylen van schuifbalken:

Vroeger was het iets dat alleen Internet Explorer kon doen (oude versies) met dingen als -ms-scrollbar-base-color. Deze bestaan niet meer.
Toen kwamen op WebKit gebaseerde browsermotoren aan boord met dingen als ::-webkit-scrollbar. Dat is wat dit Alamanac-item meestal dekt, omdat het tegenwoordig in het Safari / Chrome-landschap werkt.
Standaarden zijn eindelijk betrokken geraakt, en die stijlopties worden gedekt door niet-vooraf ingestelde eigenschappen zoals schuifbalkkleur en schuifbalkbreedte.

Schuifbalken opmaken voor de Safari / Chrome-wereld worden weergegeven achter het -webkitleveranciersvoorvoegsel.

Dit almanak-item is een overzicht, voor een vollediger overzicht van het werken met aangepaste schuifbalken, lees dit CSS-Tricks-artikel.

body::-webkit-scrollbar ( width: 1em; ) body::-webkit-scrollbar-track ( box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); ) body::-webkit-scrollbar-thumb ( background-color: darkgrey; outline: 1px solid slategrey; )

De -webkit-scrollbarfamilie van eigenschappen bestaat uit zeven verschillende pseudo-elementen die samen een volledig scrollbar UI-element vormen:

::-webkit-scrollbargaat in op de achtergrond van de balk zelf. Het wordt meestal gedekt door de andere elementen
::-webkit-scrollbar-button adresseert de richtingstoetsen op de schuifbalk
::-webkit-scrollbar-track adresseert de lege ruimte "onder" de voortgangsbalk
::-webkit-scrollbar-track-piece is de bovenste laag van de voortgangsbalk die niet wordt bedekt door het versleepbare scrollelement (duim)
::-webkit-scrollbar-thumb adresseert het versleepbare schuifelement waarvan de grootte wordt aangepast afhankelijk van de grootte van het schuifbare element
::-webkit-scrollbar-corner adresseert de (meestal) onderste hoek van het schuifbare element, waar twee schuifbalken elkaar kunnen ontmoeten
::-webkit-resizeradresseert de versleepbare formaatgreep die boven scrollbar-cornerin de benedenhoek van sommige elementen verschijnt

Naast deze pseudo-elementen zijn er ook elf pseudo-selectorklassen die niet vereist zijn, maar die ontwerpers de mogelijkheid geven om verschillende toestanden en interacties van de scrollbar UI op te maken. Een volledig overzicht van die pseudo-selectors, en een gedetailleerd voorbeeld, is te vinden in dit CSS-Tricks-artikel.

Kijk eens naar deze pen!

Nuttige Plaatsen

Als er geen kwalificerende selector is voorafgaand aan de verschillende pseudo-elementen, zijn de stijlen van toepassing op elke schuifbalk die op de pagina kan verschijnen.
Het instellen van -webkit-scrollbarstijlen is een goede manier om uw webpagina te dwingen horizontale of verticale schuifbalken weer te geven in versies van Mac OS die nieuwer zijn dan Lion, waarop schuifbalken meestal standaard verborgen zijn.
Omdat deze eigenschap achter een -webkitleveranciersvoorvoegsel staat, zijn verschillende jQuery-plug-ins geschreven om "polyfill" te maken of deze functionaliteit uit te breiden naar andere browsers. Een dergelijke plug-in is jScrollPane.

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.