Re: [css-snappoints][css-scroll-snap] scroll-snap-point-type and scroll-snap-align on the same element

On Sun, Jan 24, 2016 at 4:40 AM, Florian Rivoal <florian@rivoal.net> wrote:
> Maybe I'm not reading it carefully enough, but it seems to me that neither spec is clear about whether it is possible to use scroll-snap-align on the scroll container itself.
>
> For example, can you do this?
>
> div {
>   height: 100px;
>   overflow: scroll;
>   scroll-snap-type: mandatory;
>   scroll-snap-align: center;
> }
>
> or this?
>
> div {
>   height: 100px;
>   overflow: scroll;
>   scroll-snap-type: proximity;
>   scroll-snap-align: end;
> }
>
> I assume that it does not work, because if it did, it would cause issues in the case of nested scrollers. The spec(s) should be (more) explicit about that.

You can *do* both of those, but they won't do what you seem to be
expecting.  They'd control the snapping behavior of the container in
*its* scrolling container.  It's just like how align-content works on
the parent but align-self works on the child; you can meaningfully put
both on the same element, but they're doing different things in
different contexts, not interacting with each other.

> It does seem a little bit unfortunate though, because if we don't provide it, people who want that will be able to achieve it anyway by adding meaningless wrapper divs to their markup and putting the overflow and scroll-span-type properties on the wrapper, and I'd rather avoid encouraging wrapper divs. If we do allow it, we would need to specify that normally keys off the border box of the element on which the snap point is placed needs to key off the content box instead, since the border is outside the scroller. Maybe this difference further weights against allowing it, but then again it is easy resolved, so I am not sure.

What are you trying to do? As 'scroll-snap-align' is written, you can
align a snapper to either edge, or the center of the box, and you can
apply arbitrary offsets to this on either an individual child level
(scroll-snap-margin) or the container level (scroll-snap-padding).
What effect are you trying to achieve that's not covered by this?

~TJ

Received on Monday, 25 January 2016 19:26:14 UTC