CSS Click Chart

common stuff
cutting-edge

Scroll Snap Points

Multiple features to allow you to set "snap positions" to control how an element scrolls or pans. This can improve the user experience when (for example) viewing a gallery of images.

Specification

CSS Scroll Snap Module on W3C

Example Code

.scroll-container {
  scroll-snap-type: mandatory;
  scroll-behavior: smooth;
}

.scroll-section {
  scroll-snap-coordinate: 50% 0%;
}

.scroll-section:first-child {
  scroll-snap-coordinate: 0% 0%, 50% 0%;
  margin-left: 15px;
}

.scroll-section:last-child {
  scroll-snap-coordinate: 50% 0%, 100% 0%;
}

Live Demonstration

For a demonstration of the different scroll snap points features, view this CodePen demo in a supporting browser.

Browser Support

Can I Use css-snappoints? Data on support for the scroll-snap-points feature across the major browsers from caniuse.com.

Tools / Polyfills

Font Squirrel's @font-face Generator

Tutorials / Articles

Intuitive Scrolling Interfaces with CSS Scroll Snap Points
Introducing CSS Scroll Snap Points