Snapping sections on scroll only using CSS

0 views - 1 minute readEdit this post

I rely on your support to keep this website running. If you find the content valuable, please consider making a small donation. whether it’s ₹25/$1 or ₹500/$5.

Donate

Secured by Stripe

By using CSS scroll-snap-type and scroll-snap-align properties we can create snapping sections on scroll.

html,
body {
  overflow: hidden;
}

.sections {
  height: 100vh;
  overflow-y: scroll;
  snap-scroll-type: y mandatory;
}

.section {
  snap-scroll-align: start;
}

See the Pen Snapping Scroll by Preet Suthar (@preetsuthar17) on CodePen.

Did you enjoyed the post?

Twitter (x)