CSS Scroll Snap Points

Great to see this proposed (many people are using it nowadays, boosted by the iPhone 5s page).

.gallery {
      scroll-snap-type: mandatory;
      scroll-snap-points-x: snapList(786px, 1643px, 2483px, 3264px, 4054px, 4402px);

Don’t like the fact that one needs to specify explicit values (be it in pixels, ems, or percentages), as not all children can be of the same height/width for example (think a set of images placed horizontally next to eachother: some may be in landscape and some in portrait mode). To bypass this a CSS (direct) child selector would seem more appropriate (just a proposal I’m making here):

.gallery {
      scroll-snap-type: mandatory;
      scroll-snap-points-x: '> article';

Looking forward to see where this is headed.

Setting native-like scrolling offsets in CSS with Scrolling Snap Points →
CSS Scroll Snap Points Module Level 1 →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation


Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.