W3C home > Mailing lists > Public > www-style@w3.org > June 2015

Re: : [css-snappoints] elements and nested scrollers

From: Simon Fraser <smfr@me.com>
Date: Tue, 16 Jun 2015 11:12:10 -0700
Cc: robert@ocallahan.org, "www-style@w3.org list" <www-style@w3.org>
Message-id: <394C369A-ED32-4B5B-9345-6B36CFC0516C@me.com>
To: Majid Valipour <majidvp@chromium.org>
> On Jun 16, 2015, at 5:21 AM, Majid Valipour <majidvp@chromium.org> wrote:
> 
> I think what Robert is suggests prevents snap points crossing scroller boundaries (with the exception of overflow: hidden). However it is important to also avoid element snap offsets to cause unintended scrollers to suddenly snap. This can be resolved by separating snap point's contribution vs snapping.
> 
> How about:
> -  contribution: element contributes a snap position to the nearest ancestor whose overflow-x is "auto" or "scroll". 
> -  snapping: a scroller snaps to its contributed snap points only when it has 'scroll-snap-position: elements'
> 
> In effect, a scroller may capture snap points but not snap to them unless explicitly declared.
> 
> Also, it makes sense to have  horizontal and vertical snap offsets to be contributed separately. However this needs the followings to work well:
> 1. Scrollers to declare snap-type individually for each axis (I know that Firefox implements this so I imagine this have already been discussed but missing in the spec.)
>  2. Elements to declare snap points individually for each axis (e.g., scroll-snap-coordinate-{x,y}). At the moment snap coordinates are <position> so they always contribute vertical and horizontal values which is unfortunate. 
> 
> Here is an example to show the above:
> <div id="vertical-outer" style="overflow-y:scroll; scroll-snap-points-y: repeat(100%);">  
>   <div id="horizontal-outer" style="overflow-x:scroll; scroll-snap-points-x: elements;">
>     <div id=“intermediate" style="overflow:scroll">
>        <span id=“A" style="scroll-snap-coordinate:50%"></span>
>     </div>
>     
>     <div id=“intermediate-hidden" style="overflow: hidden">
>         <span id=“B" style="scroll-snap-coordinate:50% 50%"></span>
>     <div>
>     
>     <span id=“C" style="scroll-snap-coordinate-y:50%"></span>
>   </div>
> </div>
> 
> intermediate: receives A vertical and horizontal snap offsets but *does not* snap to it. 
> intermediate-hidden: does not capture any snap offsets.
> horizontal-outer: receives B horizontal snap offset and snaps to it.
> vertical-outer: receives B and C vertical snap offset but *does not* snap to it.

I like this.

However, I think there’s one issue we need to decide soon. If we treat X and Y snap point lists as independent, even when using ‘elements’, then you can only ever have a complete grid of snap points (snap point at every intersection of an X value and a Y value). The spec isn’t totally clear, but it seems that the current behavior with scroll-snap-coordinates is that it allows a partial grid (set of specific X,Y coordinates based on element positions).

The “partial grid” behavior is interesting, but problematic when scrolling: a vertical scroll could yank you sideways to go to nearby snap point. So I’m not sure we want to do this.

Simon
Received on Tuesday, 16 June 2015 18:12:39 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:54 UTC