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 →

Elsewhere , ,

One Response to CSS Scroll Snap Points

  1. Pingback: The Layouts of Tomorrow | Bram.us

Leave a Reply

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.