Skip to content

[css-scroll-snap-1] Alignment when scrolling to an element with scroll-snap-align #9576

@flackr

Description

@flackr

css-scroll-snap-1 6.2 Choosing Snap Positions says the following:

If a page is navigated to a fragment that defines a target element (e.g. one that would be matched by :target, or the target of scrollIntoView()), and that element defines some snap positions, the user agent must snap to one of that element’s snap positions if its nearest scroll container is a scroll snap container. The user agent may also do this even when the scroll container has scroll-snap-type: none.

While working on this, the question came up of how to respect the alignment if the developer provided one. E.g. if the developer specifies a block alignment:

target.scrollIntoView({block: "end"});

What should we do if the target element has a non-none scroll-snap-align:

Having a CSS value override the JS one, especially when it's optional, seems like it runs counter to developer expectations - e.g. confusion around why the provided alignment wasn't used.

Another concern is that currently scrolling to a fragment also specifically invokes Scroll target into view, with behavior set to "auto", block set to "start", and inline set to "nearest" so it currently has a specified alignment, even though the developer did not provide it.

TLDR; There are a few questions around this space:

  1. If we want to allow the developer to override the alignment, we probably need to have default values of "auto" which can then take the value from the scroll-snap-align value if specified, and otherwise fall back to defaults.
  2. If we do want to allow the developer to override the alignment, then we also should update the scrolling to a fragment algorithm to pass in overridable "auto" values.
  3. Can we make the optional "The user agent may also do this" part mandatory? This optional behavior is currently tested by scroll-target-align-001.html and scroll-target-align-002.html which results in interop 2022 failures as it's not implmented in chrome or safari. We could also relax the tests to allow not doing it, but it seems like it would be better if the behavior was consistent.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions