An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
Improving Horizontal Scroll with CSS Scroll Snap
The pattern with horizontal scroll is frequently found in mobile versions of sites.
For example, on Airbnb's home page:
It looks smooth and the scroll always stops at the beginning of a card, but there are many bad examples on the Internet when the scroll stops in random positions. I'll not provide links to these sites, but I've created a demo for you, please see it on your phone:
Try to enable and disable CSS Scroll Snap behaviour by toggling the checkbox on top of the page and see a difference when scrolling. The difference is enormous. When CSS scroll snap is enabled, the scroll behaviour is more smooth and looks like a native app.
This behaviour is achieved by 2 simple CSS rules:
.scroll-container { scroll-snap-type: x mandatory;}.scroll-container-child { scroll-snap-align: start;}
Cool, right? You can read more about CSS Scroll Snap on mdn.
Browser's support
It has nice browser's support and can be used in production. Can I Use.
That's it
Thank you for reading! Add your reactions and comments.
Follow me on Twitter.
Original Link: https://dev.to/paulcodes/improving-vertical-scroll-with-css-scroll-snap-2aea
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To