CSS Scroll Snap hurahisisha kutengeneza smooth scrolling ambapo kila section “inakaa” katikati ya screen unaposcroll. Ni mzuri kwa sliders, portfolios, full-screen sections na story-style layouts.
HTML + CSS (Short & Ready to Use)
<div class="snap-container">
<section class="snap-section">Section 1</section>
<section class="snap-section">Section 2</section>
<section class="snap-section">Section 3</section>
</div>
/* Container */
.snap-container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
/* Each section */
.snap-section {
height: 100vh;
scroll-snap-align: start;
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
background: #0d6efd;
color: #fff;
border-bottom: 2px solid #fff;
}
Jinsi Inavyofanya Kazi (Kwa Ufupi Sana)
scroll-snap-type: y mandatory → Browser inalazimisha kusimamia snap.
scroll-snap-align: start → Kila section inakaa mwanzo wa screen ikifikia snap point.
100vh → Kila section inachukua full screen height.
Faida
✔ Smooth UX
✔ Hakuna JavaScript
✔ Inafanya vizuri kwa mobile & desktop
🔗 Links Za Kujifunza Zaidi
🌐 Faulink Official Website:
https://www.faulink.com/
📘 Jifunze Web Design & Programming:
https://www.faulink.com/excel_mifumo.php
📲 WhatsApp Msaada:
https://wa.me/255693118509