This content originally appeared on DEV Community and was authored by Paul Golubkov
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.
This content originally appeared on DEV Community and was authored by Paul Golubkov
Paul Golubkov | Sciencx (2021-07-07T13:46:00+00:00) Improving Horizontal Scroll with CSS Scroll Snap. Retrieved from https://www.scien.cx/2021/07/07/improving-horizontal-scroll-with-css-scroll-snap/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.