I'm trying to recreate Google's Playstore design in HTML. I've made my container horizontally scrollable, and then added scroll-snap-type: x proximity; and scroll-snap-align: start; to make the elements snap while scrolling. However, only the third or fourth element snap since the scroll speed is too much. I know that scroll speeds shouldn't be tampered with code, so I need a way to always snap each element to the side like Playstore does. Any ideas?
Basically, go to the playstore and swipe on any carousal. Each item comes one after the other and snaps to the side. How do I recreate this?
Thank you!
scroll-snap-stop: always; seems to do the trick. It stops the scrolling container at every possible scroll-snap point. The default value is set to normal, which doesn't stop the body scrolling.
MDN Ref - https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-stop
Compatibility - It's compatible with almost all major browsers with the exception of Firefox & Firefox for Android (Due to bug 1312165)