Jinsi ya Kutumia CSS Scroll Snap kwa Smooth Scrolling Sections

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