Hoe schuifbalken te verbergen

Leer hoe u schuifbalken met CSS kunt verbergen.

Hoe schuifbalken te verbergen

Voeg toe overflow: hidden;，u kunt zowel de horizontale als de verticale schuifbalken verbergen.

Voorbeeld

body {
  overflow: hidden; /* Verberg schuifbalken */
}

Probeer het zelf

Om alleen de verticale schuifbalk te verbergen of alleen de horizontale schuifbalk te verbergen, gebruik dan overflow-y of overflow-x:

Voorbeeld

body {
  overflow-y: hidden; /* Verberg verticale schuifbalk */
  overflow-x: hidden; /* Verberg horizontale schuifbalk */
}

Probeer het zelf

Let op:overflow:hidden Zal ook de functionaliteit van de schuifbalk verwijderen. Kan niet scrollen binnen de pagina.

Verberg de schuifbalk maar behoud de functionaliteit

Om de schuifbalk te verbergen, maar toch door te kunnen scrollen, kunt u de volgende code gebruiken:

Voorbeeld

/* Verberg de schuifbalk voor Chrome, Safari en Opera */
.example::-webkit-scrollbar {
  display: none;
}
/* Verberg de schuifbalk voor IE, Edge en Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

Probeer het zelf

Webkit-browsers (zoals Chrome, Safari en Opera) ondersteunen niet-standaard ::-webkit-scrollbar Pseudo-element, dat ons toestaat om het uiterlijk van de browser-schuifbalk te wijzigen. Ondersteund door IE en Edge -ms-overflow-style: Eigenschap, ondersteund door Firefox scrollbar-width Eigenschappen, die ons toestaan om de schuifbalk te verbergen maar zijn functionaliteit te behouden.

Gerelateerde pagina's

Handleiding:CSS overflow

Reference manual:CSS overflow property