Hoe OM - Versteek rolbalk
Leer hoe om rolbalke met CSS te versteek.
Hoe om rolbalke te versteek
Voeg overflow: hidden;
by om beide die horisontale en vertikale skuifbalk te versteek.
Voorbeeld
body {
overflow: hidden; /* Hide scrollbars */
}
Om slegs die vertikale skuifbalk, of slegs die horisontale skuifbalk te versteek, gebruik overflow-y
of overflow-x
:
Voorbeeld
body {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
Let daarop dat overflow: hidden
dit ook die funksionaliteit van die rolbalk sal verwyder. Dit is nie moontlik om binne die bladsy te blaai nie.
Wenk: Om meer oor die overflow
eiendom te wete te kom, gaan na ons CSS-oorloop-tutoriaal of CSS-oorloop-eiendomverwysing .
Versteek rolbalke maar behou funksionaliteit
Om die rolbalke te versteek, maar steeds te kan aanhou blaai, kan jy die volgende kode gebruik:
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-blaaiers, soos Chrome, Safari en Opera, ondersteun die nie-standaard ::-webkit-scrollbar
pseudo-element, wat ons toelaat om die voorkoms van die blaaier se rolbalk te verander. IE en Edge ondersteun die -ms-overflow-style:
eiendom, en Firefox ondersteun die scrollbar-width
eiendom, wat ons toelaat om die skuifbalk te versteek, maar funksionaliteit te behou.