Title

This section before the first slide is short.

Problem

When using CSS scroll-snap-1, nesting areas with snap-align specified, the browser should try to respect the inner snap areas. Currently, most browsers consider any position to be a valid snap position as they are valid for the outer snap area. This can lead to situations where the browser ignores the inner snap points and only considers the outer snap points, which can be inconvenient for users.

Proposal

The proposal is to split snap areas larger than the viewport into regions before and after inner snap areas. We also may want to scale the inner snap area avoidance by the size of the inner snap area in proportion to the screen, in order to avoid full page snap scrolls for narrow snap items.

Example of avoiding nested areas

When the area is smaller than the viewport, a proportional strategy allows for an overlap proportional to the portion of the scrollport not filled by the inner snap area. This overlap is either split 50/50 if the alignment is center, otherwise the overlap is allowed on the opposite edge of the alignment to minimize the jump when scrolling into / out of the inner area.

In summary, the goal of dividing the larger snap point into valid snap regions is to conceptually divide the larger snap point into before and after inner snap points, so that the browser can respect the inner snap points and provide a more intuitive and user-friendly experience.

There are a variety of scenarios in which developers may nest snap areas. This demo tries to explore the complicated situations that may exist.

Snapped section headers

Header snaps to start

One common pattern that developers may adopt is setting snap align on headers. This can be used to ensure that when scrolling to a section the section is clearly visible.

The content of the section has no specified snap alignment, but should still be fully accessible as we're still in an outer snap align context.

Potential downsides

One of the potential pitfalls is that reading content at the end of a section may prove difficult. As the browser may want to snap to the next section it may pull users away from the end of a previous section.

Summary

The proportional strategy will result in a significantly decreased priority for aligning the section headers. This will make them behave more like proximity snap when in a larder snap area.

Snapped sections

Snapped section overview

Another common pattern will be for entire sections to be snap targets. This likely is the best pattern, as it will mark the entire section area as an area of interest.

When you would use this

This will provide the benefit of clearly landing the user on one section or another. It also gracefully handles when sections are larger or smaller than the viewport.

One of the benefits of the strategy to join with the previous inner range is that it will imply this arrangement of aligning sections. I.e. the section header will be automatically combined with the section text until the next header which defines its own snap alignment.

Snapped items of interest

When there are inner items that the author may want to focus on as you scroll to them, the author may make these inner items snap areas. The figure shown earlier is an example of this and is repeated here for posterity:

Example of avoiding nested areas

In this situation, the author likely wants the user to snap to the figure, but to still be able to normally read the sections before and after the figure.

One disadvantage of the joining strategy is that it results in the figure implicitly combining with the content that follows it, meaning that there is no snappiness when scrolling up into the figure.

Slides

The following illustrates multiple inner slides with an intentional degenerate case that there is a small gap between slides (a margin on the slide element).

The strategies which split the areas between inner areas result in additional snap points between the slides which is clearly undesirable.