Denne artikel demonstrerer metoden til at forhindre indhold i at flyde over og aktivere scrollning ved hjælp af CSS.
Hvordan stopper man overfyldning af indhold og aktiverer rulning?
Formålet med at forhindre indholdet i at flyde over er, at indholdet passer ind i dets beholder og ikke påvirker webstedets ydeevne negativt. Det kan nemt forstå konteksten og kan forbedre tilgængeligheden til brugernes ende. For en detaljeret forklaring lad os diskutere gennem et eksempel:
Trin 1: Aktiver rulning med indholdsoverløb
Start først med at oprette en tabel inde i HTML-filen, hvorpå rulleeffekten vil blive anvendt. Lad os antage, at tabellen allerede er oprettet, og den består af seks rækker og syv kolonner, og nogle dummy-data leveres til tabellen:
< bord >
< tr >
< th > Hoved 1 < / th >
< th > Hoved 2 < / th >
< th > Hoved 3 < / th >
< th > Hoved 4 < / th >
< th > Hoved 5 < / th >
< th > Hoved 6 < / th >
< th > Hoved 7 < / th >
< / tr >
< tr >
< td > Række 1 < / td >
< td > Række 1 < / td >
< td > Række 1 < / td >
< td > Række 1 < / td >
< td > Række 1 < / td >
< td > Række 1 < / td >
< td > Række 1 < / td >
< / tr >
< tr >
< td > Række 2 < / td >
< td > Række 2 < / td >
< td > Række 2 < / td >
< td > Række 2 < / td >
< td > Række 2 < / td >
< td > Række 2 < / td >
< td > Række 2 < / td >
< / tr >
< tr >
< td > Række 3 < / td >
< td > Række 3 < / td >
< td > Række 3 < / td >
< td > Række 3 < / td >
< td > Række 3 < / td >
< td > Række 3 < / td >
< td > Række 3 < / td >
< / tr >
< tr >
< td > Række 4 < / td >
< td > Række 4 < / td >
< td > Række 4 < / td >
< td > Række 4 < / td >
< td > Række 4 < / td >
< td > Række 4 < / td >
< td > Række 4 < / td >
< / tr >< tr >
< td > Række 5 < / td >
< td > Række 5 < / td >
< td > Række 5 < / td >
< td > Række 5 < / td >
< td > Række 5 < / td >
< td > Række 5 < / td >
< td > Række 5 < / td >
< / tr >
< tr >
< td > Række 6 < / td >
< td > Række 6 < / td >
< td > Række 6 < / td >
< td > Række 6 < / td >
< td > Række 6 < / td >
< td > Række 6 < / td >
< td > Række 6 < / td >
< / tr >
< / bord >
Efter udførelsen af ovenstående kodestykke ser websiden sådan ud:
Outputtet viser, at tabeldata er i et mindre læsbart format, og at der optages meget plads af tabellen.
Trin 2: Indstilling af overløbs- og rulleeffekt I ovenstående kodestykke: Efter udførelsen af ovenstående kodestykke ser websiden sådan ud: Websiden illustrerer, at bordet nu bruger mindre plads og forhindrer indholdet i at flyde over. Derudover er rulleeffekten blevet aktiveret. Bemærk : Ved at indstille ' overløb: auto ' eller ' overløb: rulle ”, kan brugere aktivere scrollning for overfyldt indhold. Derudover er ' overløb: skjult ” kan bruges til at forhindre overløb helt. Egenskaberne 'overflow-x' og 'overflow-y' bruges til at kontrollere overløb og muliggøre rulning på den vandrette og lodrette akse. Det forhindrer indholdet i at flyde over og gør det muligt at rulle for at lave et interaktivt responsivt design til alle enheder. Denne artikel har vist, hvordan man forhindrer indhold i at flyde over og aktiverer scrollning ved hjælp af CSS.
Efter det skal du pakke bordet sammen med en forælder '
.flyde over {
bredde : 200 px ;
højde : 200 px ;
overløb-x : auto ;
overløb-y : auto ;
rulle-adfærd : glat ;
}
Konklusion