RE: CSS properties for snapping during scrolling

± Their approach requires explicitly
± specifying a sequence of CSS lengths (or
± percentages) representing allowable snap offsets. It seems to me
± instead the snap offsets should be derived automatically from the
± layout of the descendants of the scrolling container, so that changes
± to that layout don't require manual updating of some property set on the
± container.

At first glance:

 - Pro:
It infers data form the layout, this is potentially great.

 - Cons:
I'm not sure how well this would work in the case of a css grid where some elements span multiple columns. 
It cannot possibly work when you're using transforms as part of your layout process.
It assumes the layout is not using something like subgrids (ie: wrappers divided into sub items that make sense on their own and on which you may perfectly want to stop. 


A different but interesting approach would be a "scroll-snap " property that would be formatted like a padding (except it would accept the value 'none' and have it has a default) and would define lines on the parent element relatively to the border box of the element.

<div scrollable>
 <div group>
  <header>Group 1</header>
  <div item />
  ...
 </div>
 ...
 <div group>
  <header>Group N</header>
  <div item />
  ...
 </div>
</div>

Where both groups and items would have "scroll-snap-top: 0px" property, so you can stop at the beginning of a group, or at the beginning of an element inside a group. 

Another example, you could use "scroll-snap: none 5px" to allow to scroll either 5px before or 5px after any element horizontally, but the element do not affect vertical scrolling.

Received on Thursday, 15 August 2013 06:37:13 UTC