CSS Scroll Snap Points

Bramus!12/9/13About 2 minCSSArticle(s)blogbram.uscss

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 … Continue reading ”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

One of the arguments in favour of native vs. Web is that of user experience; particularly when it comes to scrolling. A typical interaction on touch screens (especially tablets) is the sideways swipe...

CSS Scroll Snap Module Level 1

This module contains features to control panning and scrolling behavior with “snap positions”. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc.

CSS Scroll Snap Points