Ipinapakita ng artikulong ito ang paggamit ng CSS overflow-y property na may maraming halimbawa.
Paano Gamitin ang Overflow-y Property sa CSS?
Ang CSS ' umapaw-y Ang ” property ay ginagamit upang kontrolin ang pag-apaw ng nilalaman sa kahabaan ng cross-axis sa loob ng isang elemento. Tinutukoy nito kung i-clip ang content o magdagdag ng scrollbar kapag lumampas ang content sa taas ng container. Ang mga posibleng halaga para sa property na ito ay ' nakikita ”, “ nakatago ”, “ mag-scroll ”, at “ sasakyan ”.
Bisitahin natin ang mga halimbawa sa ibaba para sa isang mas mahusay na pagpapakita ng overflow-y property:
Halimbawa 1: Paggamit ng Visible bilang Halaga Para sa Overflow-y Property
Ang ' nakikita Ang halaga ng ” ay nagbibigay-daan sa nilalaman na umapaw mula sa lalagyan at hindi nagdaragdag ng anumang clipping o mga scrollbar. Bisitahin ang praktikal na code block sa ibaba:
>
>
>
Ang paglalarawan ng bloke ng code sa itaas:
- Una, magtalaga ng halaga ng ' magulang ' sa ' klase 'attribute at gamitin ang' istilo ” katangian.
- Bilang karagdagan, ibigay ang halaga ng ' nakikita 'sa CSS' umapaw-y ” ari-arian. At itakda itong katumbas ng ' istilo ” attribute para gumana ang CSS styling.
- Susunod, gumawa ng nested ' div 'elemento at italaga ito ng isang klase ng ' childContent ”. Gayundin, magbigay ng dummy data dito.
Ngayon, gamitin ang CSS properties para mapahusay ang visualization na tumutulong sa mas mahusay na pag-unawa sa CSS overflow-y property:
.magulang {lapad : 200px ;
taas : 150px ;
hangganan : 1px solid itim ;
}
.childContent {
taas : 300px ;
kulay ng background : mapusyaw na asul ;
}
Ang paglalarawan ng mga katangian ng CSS ay ibinigay sa ibaba:
- Una, ang ' magulang Ang klase ay napili at ang mga halaga ng ' 200px ”, “ 150px ”, at “ 1px solid black ' ay itinalaga sa CSS ' lapad ”, “ taas ”, at “ hangganan ” properties, ayon sa pagkakabanggit.
- Susunod, piliin ang ' childContent ” class at itakda ang mga halaga ng “ 300px 'at' mapusyaw na asul 'sa CSS' taas 'at' kulay ng background ” properties, ayon sa pagkakabanggit. Ang klase na ito ay pinalawak sa ' magulang ” klase na kinokontrol ng CSS “ pag-apaw ” ari-arian.
Pagkatapos ng pagsasama-sama ng mga snippet ng code, lalabas ang webpage na ganito:
Ang snapshot ay nagpapakita ng overflow na nilalaman ay nakikita na ngayon at ang scrollbar o clipping ay hindi naidagdag bilang default.
Halimbawa 2: Paggamit ng Nakatago bilang Halaga Para sa Overflow-y Property
Ang ' umapaw-y ' ari-arian na may halaga ng ' nakatago ” itinatago ang lahat ng content na gumagalaw sa labas ng parent container nito. Ang property na ito ay hindi nagdaragdag ng mga scrollbar sa halip ay pinutol nito ang umaapaw na nilalaman:
>
>
Ang snippet ng code sa itaas ay naglalaman ng:
- Una, ang parehong code ay ipinasok muli na may pagtaas ng dummy na nilalaman na inilagay sa loob ng panloob na elemento ng div.
- Susunod, baguhin ang halaga ng ' umapaw-y ” ari-arian sa “ nakatago ' sa ' 'tag na may klase ng ' magulang ”.
Pagkatapos muling i-render ang webpage ay ganito ang hitsura:
Ang snapshot ay nagpapakita na ang overflow na nilalaman ay pinutol.
Halimbawa 3: Paggamit ng Scroll bilang Halaga Para sa Overflow-y Property
Pagtatakda ng halaga ng “ umapaw-y ” ari-arian sa “ mag-scroll ” ay nagbibigay-daan sa end user na mag-scroll sa
nilalaman na umaapaw dito. Bisitahin natin ang bloke ng code sa ibaba:
= 'magulang' istilo = 'overflow-y: scroll;' >
= 'childContent' > Dummy lang ito nilalaman ginagamit para sa pagpapakita ng overflow-y property kapag nakatakda itong nakikita. Dummy lang ito nilalaman ginagamit para sa pagpapakita ng overflow-y property kapag nakatakda itong nakikita.
>
>Sa itaas na bloke ng code:
- Una, ang parehong istraktura ng HTML ay naipasok sa loob ng '
” tag. - Susunod, baguhin ang halaga ng ' umapaw-y ” ari-arian sa “ mag-scroll ”. Ito ay nagpapahintulot sa ' magulang ” div upang paganahin ang epekto ng pag-scroll upang makontrol ang umaapaw na nilalaman.
Pagkatapos ng compilation ng block ng code sa itaas, ang webpage ay lilitaw na ganito:
Ang gid sa itaas ay naglalarawan na ang epekto ng pag-scroll ay magagamit para sa pagkontrol sa umaapaw na nilalaman.
Halimbawa 4: Paggamit ng Auto bilang Halaga Para sa Overflow-y Property
Sa halimbawang ito, ang mga user ay makakapagdagdag lamang ng scrollbar kung hindi kasya ang content sa loob ng container. Gayundin, kung ang nilalaman ay hindi umapaw ang scrollbar ay hindi idadagdag. Ito ay posible sa pamamagitan ng pagbibigay ng halaga ng ' sasakyan 'sa CSS' umapaw-y ” ari-arian:
= 'magulang' istilo = 'overflow-y: auto;' >
= 'childContent' > Dummy lang ito nilalaman ginagamit para sa pagpapakita ng overflow-y property kapag nakatakda itong nakikita. Dummy lang ito nilalaman ginagamit para sa pagpapakita ng overflow-y property kapag nakatakda itong nakikita.
>
>Sa itaas na bloke ng code:
- Una, ipasok ang parehong HTML file sa loob ng “
” tag. - Susunod, i-update ang halaga ng ' umapaw-y ” ari-arian sa “ sasakyan ”. Binibigyang-daan nito ang epekto ng pag-scroll na nauugnay sa patayong haba ng nilalaman.
Pagkatapos ng pagtatapos ng proseso ng compilation, ang webpage ay gumagana tulad nito:
Ang gif sa itaas ay nagpapakita ng overflow property na nagpagana sa scrollbar ayon sa haba ng nilalaman.
Konklusyon
Ang CSS ' umapaw-y Ang ” property ay ginagamit upang kontrolin ang umaapaw na nilalaman sa kahabaan ng cross-axis sa loob ng isang elemento. Kinokontrol ng overflow-y property ang content ayon sa partikular na value na ibinigay sa overflow-y property. Ang ' biswal Ang halaga ay nagpapakita ng umaapaw na nilalaman, ang ' nakatago Itinatago ng ' value ang overflow na nilalaman, at ang ' mag-scroll ” value ay nagdaragdag ng scrollbar upang kontrolin ang nilalaman. At kung ang halaga ay ' sasakyan ” ang scrollbar ay nagdaragdag o nag-aalis ayon sa haba ng nilalaman.
- Una, ang parehong istraktura ng HTML ay naipasok sa loob ng '