Šajā rakstā ir parādīta metode, kā apturēt satura pārpildīšanu un iespējot ritināšanu, izmantojot CSS.
Kā apturēt satura pārpildīšanu un iespējot ritināšanu?
Mērķis ir novērst satura pārpildīšanu, lai saturs iekļautos konteinerā un negatīvi neietekmētu vietnes veiktspēju. Tas var viegli saprast kontekstu un var uzlabot piekļuvi lietotājiem. Lai iegūtu detalizētu skaidrojumu, apspriedīsim, izmantojot piemēru:
1. darbība: iespējojiet ritināšanu ar satura pārpildīšanu
Sākumā HTML failā izveidojiet tabulu, kurai tiks piemērots ritināšanas efekts. Pieņemsim, ka tabula jau ir izveidota, un tā sastāv no sešām rindām un septiņām kolonnām, un tabulai tiek sniegti daži fiktīvi dati:
< tabula >
< tr >
< th > Galva 1 < / th >
< th > 2. galva < / th >
< th > Galva 3 < / th >
< th > Galva 4 < / th >
< th > Galva 5 < / th >
< th > Galva 6 < / th >
< th > Galva 7 < / th >
< / tr >
< tr >
< td > 1. rinda < / td >
< td > 1. rinda < / td >
< td > 1. rinda < / td >
< td > 1. rinda < / td >
< td > 1. rinda < / td >
< td > 1. rinda < / td >
< td > 1. rinda < / td >
< / tr >
< tr >
< td > 2. rinda < / td >
< td > 2. rinda < / td >
< td > 2. rinda < / td >
< td > 2. rinda < / td >
< td > 2. rinda < / td >
< td > 2. rinda < / td >
< td > 2. rinda < / td >
< / tr >
< tr >
< td > 3. rinda < / td >
< td > 3. rinda < / td >
< td > 3. rinda < / td >
< td > 3. rinda < / td >
< td > 3. rinda < / td >
< td > 3. rinda < / td >
< td > 3. rinda < / td >
< / tr >
< tr >
< td > 4. rinda < / td >
< td > 4. rinda < / td >
< td > 4. rinda < / td >
< td > 4. rinda < / td >
< td > 4. rinda < / td >
< td > 4. rinda < / td >
< td > 4. rinda < / td >
< / tr >< tr >
< td > 5. rinda < / td >
< td > 5. rinda < / td >
< td > 5. rinda < / td >
< td > 5. rinda < / td >
< td > 5. rinda < / td >
< td > 5. rinda < / td >
< td > 5. rinda < / td >
< / tr >
< tr >
< td > 6. rinda < / td >
< td > 6. rinda < / td >
< td > 6. rinda < / td >
< td > 6. rinda < / td >
< td > 6. rinda < / td >
< td > 6. rinda < / td >
< td > 6. rinda < / td >
< / tr >
< / tabula >
Pēc iepriekš minētā koda fragmenta izpildes tīmekļa lapa izskatās šādi:
Izvade parāda, ka tabulas dati ir mazāk lasāmā formātā un tabula aizņem daudz vietas.
2. darbība. Pārplūdes un ritināšanas efekta iestatīšana Iepriekš minētajā koda fragmentā: Pēc iepriekš minētā koda fragmenta izpildes tīmekļa lapa izskatās šādi: Tīmekļa lapa parāda, ka tabula tagad aizņem mazāk vietas un neļauj saturam pārpildīt. Turklāt ir iespējots ritināšanas efekts. Piezīme : iestatot “ pārplūde: auto ” vai “ pārpilde: ritiniet ”, lietotāji var iespējot ritināšanu pārpildītam saturam. Turklāt ' pārplūde: paslēpta ” var izmantot, lai pilnībā novērstu pārplūdi. Rekvizīti “overflow-x” un “overflow-y” tiek izmantoti, lai kontrolētu pārplūdi un iespējotu ritināšanu pa horizontālo un vertikālo asi. Tas novērš satura pārpildīšanu un ļauj ritināt, lai izveidotu interaktīvu atsaucīgu dizainu visām ierīcēm. Šajā rakstā ir parādīts, kā novērst satura pārpildīšanu un iespējot ritināšanu, izmantojot CSS.
Pēc tam aptiniet galdu ar kādu no vecākiem.
.pārplūst {
platums : 200 pikseļi ;
augstums : 200 pikseļi ;
pārplūde-x : auto ;
pārpilde-y : auto ;
ritināšanas uzvedība : gluda ;
}
Secinājums