Ang patayo at pahalang na pag-scroll ay mga paraan ng pag-navigate sa isang web page gamit ang mouse, touchpad, o daliri. Ang patayong pag-scroll ay ginagamit kapag ang nilalaman ng isang elemento ay lumampas sa taas ng lalagyan. Habang ang pahalang na pag-scroll ay ginagamit kapag ang nilalaman sa loob ng isang elemento ay lumampas sa lapad ng lalagyan. Ang vertical na pag-scroll ay nagbibigay-daan sa mga user na ilipat ang web page pataas at pababa habang ang pahalang na pag-scroll ay nagbibigay-daan sa pahina na lumipat pakaliwa at pakanan. Ang Tailwind CSS ay nagbibigay ng mga utility class upang paganahin ang patayo at pahalang na pag-scroll sa mga web page.
Ang artikulong ito ay magiging halimbawa:
- Paano Paganahin ang Vertical Scrolling sa Tailwind?
- Paano Paganahin ang Pahalang na Pag-scroll sa Tailwind?
Paano Paganahin ang Vertical Scrolling sa Tailwind?
Upang paganahin ang patayong pag-scroll sa Tailwind, gamitin ang ' overflow-y-scroll ” utility class na may gustong elemento sa HTML program. Pinapayagan nito ang patayong pag-scroll at palaging ipinapakita ang mga scrollbar maliban kung hindi pinagana ng user ang mga 'palaging nakikita' na mga scrollbar sa kanilang mga setting ng system.
Syntax
< elemento klase = 'overflow-y-scroll ...' > ... elemento >
Halimbawa: Paganahin ang Vertical Scrolling
Sa halimbawang ito, gagawa kami ng flex container na may ilang flex item sa isang column at ilalapat ang ' overflow-y-scroll ” utility dito:
< katawan >
< div klase = 'flex flex-col overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div klase = 'bg-dilaw-400 p-2 m-2' > 1 div >
< div klase = 'bg-dilaw-400 p-2 m-2' > 2 div >
< div klase = 'bg-dilaw-400 p-2 m-2' > 3 div >
< div klase = 'bg-dilaw-400 p-2 m-2' > 4 div >
< div klase = 'bg-dilaw-400 p-2 m-2' > 5 div >
< div klase = 'bg-dilaw-400 p-2 m-2' > 6 div >
div >
katawan >
Dito, sa parent
- “ baluktot Ang klase ng ” ay ginagamit upang ayusin ang mga laki ng elemento ng bata batay sa magagamit na espasyo sa pamamagitan ng paglikha ng nababaluktot na layout.
- “ flex-col ” class ay nagtatakda ng flex-direction ng container sa isang column.
- “ overflow-y-scroll ” class ay nagbibigay-daan sa patayong pag-scroll.
- “ bg-purple-700 ” itinatakda ng klase ang lilang kulay sa background ng lalagyan.
- “ p-4 ” Ang klase ay nagtatakda ng 4 na unit ng padding sa lahat ng panig ng lalagyan.
- “ mx-14 ” class ang naglalapat ng 14 na unit ng margin sa x-axis ng container.
- “ mt-5 ” class na inilalapat ang 5 unit ng margin sa tuktok ng lalagyan.
- “ h-36 ” klase ay nagtatakda ng taas ng lalagyan sa 36 na yunit.
Sa bata
- “ bg-dilaw-400 ” itinatakda ng klase ang background ng mga grid item sa dilaw.
- “ p-2 ” class ay nagdaragdag ng 3 unit ng padding sa nilalaman sa loob ng mga flex item.
- “ m-2 ” Ang klase ay nagtatakda ng margin ng 2 unit sa mga flex na item.
Output
Sa output sa itaas, makikita na matagumpay na pinagana ang vertical scrolling.
Paano Paganahin ang Pahalang na Pag-scroll sa Tailwind?
Upang paganahin ang pahalang na pag-scroll sa Tailwind, gamitin ang ' overflow-x-scroll ” utility class na may partikular na elemento sa HTML program. Pinapagana nito ang pahalang na pag-scroll at palaging ipinapakita ang mga scrollbar maliban kung hindi pinagana ng user ang mga scrollbar na 'palaging nakikita' sa kanilang mga setting ng system.
Syntax
< elemento klase = 'overflow-x-scroll ...' > ... elemento >
Halimbawa: Paganahin ang Pahalang na Pag-scroll
Sa halimbawang ito, gagawa kami ng isang flex na lalagyan na may ilang magkakasunod na flex na item at ilalapat ang ' overflow-x-scroll ” utility dito:
< katawan >< div klase = 'flex flex-row overflow-x-scroll space-x-24 bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div klase = 'bg-dilaw-400 p-2 m-2' > 1 div >
< div klase = 'bg-dilaw-400 p-2 m-2' > 2 div >
< div klase = 'bg-dilaw-400 p-2 m-2' > 3 div >
< div klase = 'bg-dilaw-400 p-2 m-2' > 4 div >
< div klase = 'bg-dilaw-400 p-2 m-2' > 5 div >
< div klase = 'bg-dilaw-400 p-2 m-2' > 6 div >
div >
katawan >
Dito sa parent
Output
Ang output sa itaas ay nagpapahiwatig na ang pahalang na pag-scroll ay matagumpay na pinagana.
Konklusyon
Upang paganahin ang patayo at pahalang na pag-scroll sa Tailwind, ang ' overflow-y-scroll 'at' overflow-x-scroll ” Ang mga klase ng utility ay ginagamit ayon sa pagkakabanggit. Ang mga utility na ito ay inilapat sa mga gustong elemento sa HTML program upang paganahin ang patayo at pahalang na pag-scroll at palaging ipakita ang mga scrollbar. Ang artikulong ito ay nagpakita ng paraan upang paganahin ang patayo at pahalang na pag-scroll sa Tailwind.