Dit artikel demonstreert de methode om te voorkomen dat inhoud overstroomt en scrollen mogelijk maakt met behulp van CSS.
Hoe te stoppen met overlopen van inhoud en scrollen inschakelen?
Het doel om te voorkomen dat inhoud overstroomt, is dat de inhoud in de container past en geen negatieve invloed heeft op de prestaties van de website. Het kan de context gemakkelijk begrijpen en kan de toegankelijkheid voor gebruikers verbeteren. Laten we voor een gedetailleerde uitleg een voorbeeld bespreken:
Stap 1: schakel scrollen met inhoudoverloop in
Begin in eerste instantie met het maken van een tabel in het HTML-bestand waarop het scrolleffect wordt toegepast. Laten we aannemen dat de tabel al is gemaakt en bestaat uit zes rijen en zeven kolommen, en dat er enkele dummygegevens aan de tabel zijn verstrekt:
< tafel >
< tr >
< e > Hoofd 1 < / e >
< e > Hoofd 2 < / e >
< e > Hoofd 3 < / e >
< e > Hoofd 4 < / e >
< e > Hoofd 5 < / e >
< e > Hoofd 6 < / e >
< e > Hoofd 7 < / e >
< / tr >
< tr >
< td > Rij 1 < / td >
< td > Rij 1 < / td >
< td > Rij 1 < / td >
< td > Rij 1 < / td >
< td > Rij 1 < / td >
< td > Rij 1 < / td >
< td > Rij 1 < / td >
< / tr >
< tr >
< td > Rij 2 < / td >
< td > Rij 2 < / td >
< td > Rij 2 < / td >
< td > Rij 2 < / td >
< td > Rij 2 < / td >
< td > Rij 2 < / td >
< td > Rij 2 < / td >
< / tr >
< tr >
< td > Rij 3 < / td >
< td > Rij 3 < / td >
< td > Rij 3 < / td >
< td > Rij 3 < / td >
< td > Rij 3 < / td >
< td > Rij 3 < / td >
< td > Rij 3 < / td >
< / tr >
< tr >
< td > Rij 4 < / td >
< td > Rij 4 < / td >
< td > Rij 4 < / td >
< td > Rij 4 < / td >
< td > Rij 4 < / td >
< td > Rij 4 < / td >
< td > Rij 4 < / td >
< / tr >< tr >
< td > Rij 5 < / td >
< td > Rij 5 < / td >
< td > Rij 5 < / td >
< td > Rij 5 < / td >
< td > Rij 5 < / td >
< td > Rij 5 < / td >
< td > Rij 5 < / td >
< / tr >
< tr >
< td > Rij 6 < / td >
< td > Rij 6 < / td >
< td > Rij 6 < / td >
< td > Rij 6 < / td >
< td > Rij 6 < / td >
< td > Rij 6 < / td >
< td > Rij 6 < / td >
< / tr >
< / tafel >
Na de uitvoering van het bovenstaande codefragment ziet de webpagina er als volgt uit:
De uitvoer geeft aan dat tabelgegevens in een minder leesbaar formaat zijn en dat de tabel veel ruimte inneemt.
Stap 2: Overloop- en scrolleffect instellen In het bovenstaande codefragment: Na de uitvoering van het bovenstaande codefragment ziet de webpagina er als volgt uit: De webpagina illustreert dat de tabel nu minder ruimte in beslag neemt en voorkomt dat de inhoud overstroomt. Daarnaast is het scroll-effect ingeschakeld. Opmerking : Door in te stellen “ overloop: automatisch ' of ' overloop: scrollen ”, kunnen gebruikers scrollen inschakelen voor overlopende inhoud. Tevens de ' overloop verborgen ” kan worden gebruikt om overlopen helemaal te voorkomen. De eigenschappen 'overflow-x' en 'overflow-y' worden gebruikt om overflow te regelen en scrollen op de horizontale en verticale as mogelijk te maken. Het voorkomt dat de inhoud overstroomt en maakt scrollen mogelijk om een interactief responsief ontwerp voor alle apparaten te maken. Dit artikel heeft gedemonstreerd hoe u kunt voorkomen dat de inhoud overstroomt en scrollen mogelijk maakt met behulp van CSS.
Pak daarna de tafel in met een ouder '
.overloop {
breedte : 200px ;
hoogte : 200px ;
overloop-x : auto ;
overloop-y : auto ;
scroll-gedrag : zacht ;
}
Conclusie