Ang artikulong ito ay nagpapakita ng paraan upang pigilan ang nilalaman mula sa pag-apaw at paganahin ang pag-scroll gamit ang CSS.
Paano Pigilan ang Pag-uumapaw ng Nilalaman at Paganahin ang Pag-scroll?
Ang layunin na pigilan ang nilalaman mula sa pag-apaw ay ang nilalaman ay umaangkop sa loob ng lalagyan nito at hindi negatibong nakakaapekto sa pagganap ng website. Madali nitong mauunawaan ang konteksto at mapapahusay ang pagiging naa-access sa dulo ng mga user. Para sa isang detalyadong paliwanag, talakayin natin sa pamamagitan ng isang halimbawa:
Hakbang 1: Paganahin ang Pag-scroll gamit ang Content Overflow
Sa una, magsimula sa paglikha ng isang talahanayan sa loob ng HTML file kung saan ilalapat ang epekto ng pag-scroll. Ipagpalagay natin, ang talahanayan ay nilikha na, at ito ay binubuo ng anim na hanay at pitong hanay, at ilang dummy data ang ibinigay sa talahanayan:
< mesa >
< tr >
< ika > Ulo 1 < / ika >
< ika > Ulo 2 < / ika >
< ika > Ulo 3 < / ika >
< ika > Ulo 4 < / ika >
< ika > Ulo 5 < / ika >
< ika > Ulo 6 < / ika >
< ika > Ulo 7 < / ika >
< / tr >
< tr >
< td > Hilera 1 < / td >
< td > Hilera 1 < / td >
< td > Hilera 1 < / td >
< td > Hilera 1 < / td >
< td > Hilera 1 < / td >
< td > Hilera 1 < / td >
< td > Hilera 1 < / td >
< / tr >
< tr >
< td > Hanay 2 < / td >
< td > Hanay 2 < / td >
< td > Hanay 2 < / td >
< td > Hanay 2 < / td >
< td > Hanay 2 < / td >
< td > Hanay 2 < / td >
< td > Hanay 2 < / td >
< / tr >
< tr >
< td > Hanay 3 < / td >
< td > Hanay 3 < / td >
< td > Hanay 3 < / td >
< td > Hanay 3 < / td >
< td > Hanay 3 < / td >
< td > Hanay 3 < / td >
< td > Hanay 3 < / td >
< / tr >
< tr >
< td > Hanay 4 < / td >
< td > Hanay 4 < / td >
< td > Hanay 4 < / td >
< td > Hanay 4 < / td >
< td > Hanay 4 < / td >
< td > Hanay 4 < / td >
< td > Hanay 4 < / td >
< / tr >< tr >
< td > Hanay 5 < / td >
< td > Hanay 5 < / td >
< td > Hanay 5 < / td >
< td > Hanay 5 < / td >
< td > Hanay 5 < / td >
< td > Hanay 5 < / td >
< td > Hanay 5 < / td >
< / tr >
< tr >
< td > Hanay 6 < / td >
< td > Hanay 6 < / td >
< td > Hanay 6 < / td >
< td > Hanay 6 < / td >
< td > Hanay 6 < / td >
< td > Hanay 6 < / td >
< td > Hanay 6 < / td >
< / tr >
< / mesa >
Pagkatapos ng execution ng snippet ng code sa itaas, lalabas ang webpage nang ganito:
Ipinapakita ng output na ang data ng talahanayan ay nasa isang hindi gaanong nababasang format at maraming espasyo ang nakukuha ng talahanayan.
Hakbang 2: Pagse-set ng Overflow at Scrolling Effect Sa snippet ng code sa itaas: Pagkatapos ng execution ng snippet ng code sa itaas, lalabas ang webpage nang ganito: Ang webpage ay naglalarawan na ang talahanayan ay kumokonsumo na ngayon ng mas kaunting espasyo at pinipigilan ang nilalaman mula sa pag-apaw. Bilang karagdagan, pinagana ang epekto ng pag-scroll. Tandaan : Sa pamamagitan ng pagtatakda ng “ overflow: auto 'o' overflow: scroll ”, maaaring paganahin ng mga user ang pag-scroll para sa umaapaw na nilalaman. Bilang karagdagan, ang ' overflow: nakatago ” ay maaaring gamitin upang maiwasan ang pag-apaw nang buo. Ang 'overflow-x' at 'overflow-y' na mga katangian ay ginagamit upang kontrolin ang overflow at paganahin ang pag-scroll sa pahalang at patayong axis. Pinipigilan nito ang pag-apaw ng content at binibigyang-daan ang pag-scroll upang makagawa ng interactive na tumutugon na disenyo para sa lahat ng device. Ipinakita ng artikulong ito kung paano pigilan ang nilalaman mula sa pag-apaw at paganahin ang pag-scroll gamit ang CSS.
Pagkatapos nito, balutin ang mesa sa isang magulang '
.pag-apaw {
lapad : 200px ;
taas : 200px ;
umaapaw-x : sasakyan ;
umapaw-y : sasakyan ;
scroll-uugali : makinis ;
}
Konklusyon