Šiame straipsnyje parodytas būdas sustabdyti turinio perpildymą ir įgalinti slinkimą naudojant CSS.
Kaip sustabdyti turinio perpildymą ir įjungti slinkimą?
Siekiama, kad turinys neperpildytų, kad turinys tilptų į konteinerį ir nedarytų neigiamos įtakos svetainės veikimui. Jis gali lengvai suprasti kontekstą ir pagerinti naudotojų pasiekiamumą. Norėdami gauti išsamų paaiškinimą, aptarkime pavyzdžiu:
1 veiksmas: įgalinkite slinkimą su turinio perpildymu
Iš pradžių HTML faile sukurkite lentelę, kurioje bus pritaikytas slinkimo efektas. Tarkime, lentelė jau sukurta ir susideda iš šešių eilučių ir septynių stulpelių, o į lentelę pateikiami kai kurie netikri duomenys:
< stalo >
< tr >
< th > 1 galva < / th >
< th > 2 galva < / th >
< th > 3 galva < / th >
< th > 4 galva < / th >
< th > Galva 5 < / th >
< th > Galva 6 < / th >
< th > Galva 7 < / th >
< / tr >
< tr >
< td > 1 eilutė < / td >
< td > 1 eilutė < / td >
< td > 1 eilutė < / td >
< td > 1 eilutė < / td >
< td > 1 eilutė < / td >
< td > 1 eilutė < / td >
< td > 1 eilutė < / td >
< / tr >
< tr >
< td > 2 eilutė < / td >
< td > 2 eilutė < / td >
< td > 2 eilutė < / td >
< td > 2 eilutė < / td >
< td > 2 eilutė < / td >
< td > 2 eilutė < / td >
< td > 2 eilutė < / td >
< / tr >
< tr >
< td > 3 eilutė < / td >
< td > 3 eilutė < / td >
< td > 3 eilutė < / td >
< td > 3 eilutė < / td >
< td > 3 eilutė < / td >
< td > 3 eilutė < / td >
< td > 3 eilutė < / td >
< / tr >
< tr >
< td > 4 eilutė < / td >
< td > 4 eilutė < / td >
< td > 4 eilutė < / td >
< td > 4 eilutė < / td >
< td > 4 eilutė < / td >
< td > 4 eilutė < / td >
< td > 4 eilutė < / td >
< / tr >< tr >
< td > 5 eilutė < / td >
< td > 5 eilutė < / td >
< td > 5 eilutė < / td >
< td > 5 eilutė < / td >
< td > 5 eilutė < / td >
< td > 5 eilutė < / td >
< td > 5 eilutė < / td >
< / tr >
< tr >
< td > 6 eilutė < / td >
< td > 6 eilutė < / td >
< td > 6 eilutė < / td >
< td > 6 eilutė < / td >
< td > 6 eilutė < / td >
< td > 6 eilutė < / td >
< td > 6 eilutė < / td >
< / tr >
< / stalo >
Įvykdžius aukščiau pateiktą kodo fragmentą, tinklalapis atrodo taip:
Išvestis rodo, kad lentelės duomenys yra mažiau skaitomo formato ir lentelė užima daug vietos.
2 veiksmas: perpildymo ir slinkimo efekto nustatymas Aukščiau pateiktame kodo fragmente: Įvykdžius aukščiau pateiktą kodo fragmentą, tinklalapis atrodo taip: Tinklalapis rodo, kad lentelė dabar užima mažiau vietos ir neleidžia perpildyti turinio. Be to, buvo įjungtas slinkimo efektas. Pastaba : nustatydami „ perpildymas: automatinis “ arba „ perpildymas: slinkti “, vartotojai gali įjungti perpildyto turinio slinkimą. Be to, „ perteklius paslėptas “ gali būti naudojamas norint visiškai išvengti perpildymo. Ypatybės „perpildymas-x“ ir „perpildymas-y“ naudojamos norint valdyti perpildymą ir įgalinti slinkimą horizontalioje ir vertikalioje ašyje. Tai apsaugo nuo turinio perpildymo ir leidžia slinkti, kad būtų sukurtas interaktyvus reaguojantis dizainas visiems įrenginiams. Šiame straipsnyje parodyta, kaip sustabdyti turinio perpildymą ir įgalinti slinkimą naudojant CSS.
Po to apvyniokite stalą su tėvais “
.perpildymas {
plotis : 200 piks ;
aukščio : 200 piks ;
perpildymas-x : automatinis ;
perpildymas-y : automatinis ;
slinkties elgesys : sklandžiai ;
}
Išvada