Hoe - Verberg de schuifbalk
Leer hoe u schuifbalken kunt verbergen met CSS.
Hoe schuifbalken te verbergen
Toevoegen overflow: hidden;
om zowel de horizontale als de verticale schuifbalk te verbergen.
Voorbeeld
body {
overflow: hidden; /* Hide scrollbars */
}
Om alleen de verticale schuifbalk of alleen de horizontale schuifbalk te verbergen, gebruikt u overflow-y
of overflow-x
:
Voorbeeld
body {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
Merk op dat overflow: hidden
hiermee ook de functionaliteit van de schuifbalk wordt verwijderd. Het is niet mogelijk om binnen de pagina te scrollen.
Tip: Ga voor meer informatie over de overflow
eigenschap naar onze CSS Overflow Tutorial of CSS overflow Property Reference .
Verberg schuifbalken maar behoud functionaliteit
Om de schuifbalken te verbergen, maar toch te kunnen blijven scrollen, kunt u de volgende code gebruiken:
Voorbeeld
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar
for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /*
IE and Edge */
scrollbar-width: none; /* Firefox */
}
Webkit-browsers, zoals Chrome, Safari en Opera, ondersteunen het niet-standaard ::-webkit-scrollbar
pseudo-element, waarmee we het uiterlijk van de schuifbalk van de browser kunnen wijzigen. IE en Edge ondersteunen de -ms-overflow-style:
eigenschap en Firefox ondersteunt de scrollbar-width
eigenschap, waardoor we de schuifbalk kunnen verbergen, maar de functionaliteit behouden.