Denne artikkelen demonstrerer metoden for å stoppe innhold fra å flyte over og aktivere rulling ved hjelp av CSS.
Hvordan stoppe innhold som flyter over og aktivere rulling?
Hensikten med å stoppe innhold fra å flyte over er at innholdet passer inn i beholderen og ikke påvirker nettstedets ytelse negativt. Det kan lett forstå konteksten og kan forbedre tilgjengeligheten for brukernes ende. For en detaljert forklaring, la oss diskutere gjennom et eksempel:
Trinn 1: Aktiver rulling med innholdsoverflyt
Start først med å lage en tabell inne i HTML-filen som rulleeffekten skal brukes på. La oss anta at tabellen allerede er opprettet, og den består av seks rader og syv kolonner, og noen dummydata er gitt til tabellen:
< bord >
< tr >
< th > Hode 1 < / th >
< th > Hode 2 < / th >
< th > Hode 3 < / th >
< th > Hode 4 < / th >
< th > Hode 5 < / th >
< th > Hode 6 < / th >
< th > Hode 7 < / th >
< / tr >
< tr >
< td > Rad 1 < / td >
< td > Rad 1 < / td >
< td > Rad 1 < / td >
< td > Rad 1 < / td >
< td > Rad 1 < / td >
< td > Rad 1 < / td >
< td > Rad 1 < / td >
< / tr >
< tr >
< td > Rad 2 < / td >
< td > Rad 2 < / td >
< td > Rad 2 < / td >
< td > Rad 2 < / td >
< td > Rad 2 < / td >
< td > Rad 2 < / td >
< td > Rad 2 < / td >
< / tr >
< tr >
< td > Rad 3 < / td >
< td > Rad 3 < / td >
< td > Rad 3 < / td >
< td > Rad 3 < / td >
< td > Rad 3 < / td >
< td > Rad 3 < / td >
< td > Rad 3 < / td >
< / tr >
< tr >
< td > Rad 4 < / td >
< td > Rad 4 < / td >
< td > Rad 4 < / td >
< td > Rad 4 < / td >
< td > Rad 4 < / td >
< td > Rad 4 < / td >
< td > Rad 4 < / td >
< / tr >< tr >
< td > Rad 5 < / td >
< td > Rad 5 < / td >
< td > Rad 5 < / td >
< td > Rad 5 < / td >
< td > Rad 5 < / td >
< td > Rad 5 < / td >
< td > Rad 5 < / td >
< / tr >
< tr >
< td > Rad 6 < / td >
< td > Rad 6 < / td >
< td > Rad 6 < / td >
< td > Rad 6 < / td >
< td > Rad 6 < / td >
< td > Rad 6 < / td >
< td > Rad 6 < / td >
< / tr >
< / bord >
Etter utførelse av kodebiten ovenfor, ser nettsiden slik ut:
Utdataene viser at tabelldata er i et mindre lesbart format og at mye plass tas opp av tabellen.
Trinn 2: Angi overløp og rulleeffekt I kodebiten ovenfor: Etter utførelse av kodebiten ovenfor, ser nettsiden slik ut: Nettsiden illustrerer at tabellen nå bruker mindre plass og hindrer innholdet i å flyte over. I tillegg er rulleeffekten aktivert. Merk : Ved å stille inn ' overløp: auto ' eller ' overløp: bla ”, kan brukere aktivere rulling for overfylt innhold. I tillegg ' overløp: skjult ” kan brukes til å forhindre overløp helt. Egenskapene 'overflow-x' og 'overflow-y' brukes til å kontrollere overløp og muliggjøre rulling på den horisontale og vertikale aksen. Det forhindrer innholdet i å flyte over og gjør det mulig å rulle for å lage et interaktivt responsivt design for alle enheter. Denne artikkelen har demonstrert hvordan du stopper innhold fra å flyte over og aktiverer rulling ved hjelp av CSS.
Etter det, pakk bordet med en forelder '
.flyte {
bredde : 200 piksler ;
høyde : 200 piksler ;
overløp-x : auto ;
overløp-y : auto ;
rulle-atferd : glatt ;
}
Konklusjon