Ta članek prikazuje metodo za zaustavitev prelivanja vsebine in omogočanje drsenja s pomočjo CSS.
Kako ustaviti prelivanje vsebine in omogočiti drsenje?
Namen preprečiti prelivanje vsebine je, da se vsebina prilega svojemu vsebniku in ne vpliva negativno na delovanje spletnega mesta. Z lahkoto razume kontekst in lahko izboljša dostopnost uporabnikom. Za podrobnejšo razlago razpravljajmo s primerom:
1. korak: omogočite drsenje s prelivanjem vsebine
Na začetku začnite z ustvarjanjem tabele znotraj datoteke HTML, na kateri bo uporabljen učinek drsenja. Predpostavimo, da je tabela že ustvarjena in je sestavljena iz šestih vrstic in sedmih stolpcev, tabeli pa je na voljo nekaj navideznih podatkov:
< tabela >
< tr >
< th > glava 1 < / th >
< th > glava 2 < / th >
< th > glava 3 < / th >
< th > glava 4 < / th >
< th > Glava 5 < / th >
< th > Glava 6 < / th >
< th > Glava 7 < / th >
< / tr >
< tr >
< td > 1. vrstica < / td >
< td > 1. vrstica < / td >
< td > 1. vrstica < / td >
< td > 1. vrstica < / td >
< td > 1. vrstica < / td >
< td > 1. vrstica < / td >
< td > 1. vrstica < / td >
< / tr >
< tr >
< td > 2. vrstica < / td >
< td > 2. vrstica < / td >
< td > 2. vrstica < / td >
< td > 2. vrstica < / td >
< td > 2. vrstica < / td >
< td > 2. vrstica < / td >
< td > 2. vrstica < / td >
< / tr >
< tr >
< td > 3. vrstica < / td >
< td > 3. vrstica < / td >
< td > 3. vrstica < / td >
< td > 3. vrstica < / td >
< td > 3. vrstica < / td >
< td > 3. vrstica < / td >
< td > 3. vrstica < / td >
< / tr >
< tr >
< td > 4. vrstica < / td >
< td > 4. vrstica < / td >
< td > 4. vrstica < / td >
< td > 4. vrstica < / td >
< td > 4. vrstica < / td >
< td > 4. vrstica < / td >
< td > 4. vrstica < / td >
< / tr >< tr >
< td > Vrstica 5 < / td >
< td > Vrstica 5 < / td >
< td > Vrstica 5 < / td >
< td > Vrstica 5 < / td >
< td > Vrstica 5 < / td >
< td > Vrstica 5 < / td >
< td > Vrstica 5 < / td >
< / tr >
< tr >
< td > 6. vrstica < / td >
< td > 6. vrstica < / td >
< td > 6. vrstica < / td >
< td > 6. vrstica < / td >
< td > 6. vrstica < / td >
< td > 6. vrstica < / td >
< td > 6. vrstica < / td >
< / tr >
< / tabela >
Po izvedbi zgornjega delčka kode se spletna stran prikaže takole:
Izhod prikaže, da so podatki tabele v manj berljivi obliki in da tabela zasede veliko prostora.
2. korak: Nastavitev učinka prelivanja in drsenja V zgornjem delčku kode: Po izvedbi zgornjega delčka kode se spletna stran prikaže takole: Spletna stran prikazuje, da tabela zdaj zaseda manj prostora in preprečuje prepolno vsebino. Poleg tega je omogočen učinek drsenja. Opomba : Z nastavitvijo “ preliv: avto « ali » overflow: drsenje «, lahko uporabniki omogočijo drsenje za vsebino, ki se preliva. Poleg tega je ' overflow: skrito ” lahko uporabite za popolno preprečitev prelivanja. Lastnosti »overflow-x« in »overflow-y« se uporabljata za nadzor prelivanja in omogočanje drsenja po vodoravni in navpični osi. Preprečuje prelivanje vsebine in omogoča drsenje za interaktivno odzivno zasnovo za vse naprave. Ta članek je pokazal, kako preprečiti prelivanje vsebine in omogočiti drsenje s pomočjo CSS.
Po tem zavijte mizo s staršem '
.preliv {
premer : 200 slikovnih pik ;
višina : 200 slikovnih pik ;
prelivanje-x : avto ;
overflow-y : avto ;
scroll-behavior : gladka ;
}
Zaključek