Web Sticky Scroll Snapping —— scroll-snap-type

At first, I was quite excited to learn about this property, imagining many interface cases where it could be used. Could even the slideshow feature be easily solved with native scrolling? However, only by actually using it will you realize that they are completely different experiences.

This property focuses on the sticky adhesion of the scroll, so it works whether you are scrolling with a mouse or touching the screen. However, if you want to drag elements to scroll, this property won’t help; you’ll still need to write custom JS to solve that.

You can refer to the well-established slideshow library Swiper🔗, which actually implements this property in its CSS Mode.

For more practical examples and implementation details, you can check out Practical CSS Scroll Snapping - CSS-Tricks🔗