Practical CSS Scroll Snapping

CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling. Its great for building interactions like this one:

Live Demo
Browser support and basic usage

Browser support for CSS scroll snapping has improved significantly since it was introduced in 2016, with Google Chrome (69+), Firefox, Edge, and Safari all supporting some version of it.

Scroll snapping is used by setting the scroll-snap-type property on a container element and the …

The post Practical CSS Scroll Snapping appeared first on CSS-Tricks.