Scroll Snap

Examples that show the various scroll snap properties supported by Atomizer.

scroll-behavior

The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation, CSSOM scrolling APIs or SCROLL-SNAP.

Following example shows Sb(s) = scroll-behavior: smooth.

<div class="Sb(s)">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

scroll-snap-align

The scroll-snap-align property specifies the box’s snap position as an alignment of its snap area (as the alignment subject) within its snap container’s snapport (as the alignment container). You can specify up to 2 values for this property, representing the block and inline axes, respectively. If you only give 1 value, that value will be used for both axes.

Following example shows Ssa(s) = scroll-snap-align: start.

<div class="Sb(s)">
    <div class="Ssa(s)">1</div>
    <div class="Ssa(c)">2</div>
    <div class="Ssa(e)">3</div>
</div>

scroll-snap-type

The scroll-snap-type property specifies whether a scroll container is a scroll snap container, how strictly it snaps, and which axes are considered. If no strictness value is specified, proximity is assumed.

Following example shows Sst(x_p) = scroll-snap-type: x proximity.

<div class="Sst(x_p)">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

scroll-margin && scroll-margin-*

The scroll-margin shorthand property sets scroll margin on all sides of an element at once, much like the margin property does for margin on an element, can also use longhand versions like scroll-margin-left etc. If all elements have the same spacing requirements, consider using scroll-padding on the parent container instead of scroll-margin because that affects spacing for all elements within the container.

Following example shows Smstart(2em) = scroll-margin-left: 2em.

<div>
    <div>1</div>
    <div class="Smstart(2em)">2</div>
    <div>3</div>
</div>

scroll-padding & scroll-padding-*constructs

The scroll-padding shorthand property sets scroll padding on all sides of an element at once, much like the padding property does for padding on an element, can also use longhand versions like scroll-padding-left etc.

Following example shows Spx(20px) = scroll-padding-left: 20px; scroll-padding-right: 20px;.

<div class="Spx(20px)">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    ...
</div>

scroll-snap-stop

The scroll-snap-stop CSS property defines whether or not the scroll container is allowed to “pass over” possible snap positions.

Following example shows Sst(x_m) = scroll-snap-stop: x mandatory.

<div class="Sst(x_m)">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    ...
</div>