This is the Standard reference for scrolling.
The vocabulary comes from the teacss-ts Storybook at revision
9de266d for package version 0.10.11.
Each value list gives finite examples and named values for its prefixes. A
bracket or variable example demonstrates that open form for the same prefix;
the listed arbitrary literals are samples, not every accepted literal. Check
the Storybook token reference for more examples,
and do not infer support from a different prefix.
scroll-behavior
Interactive example.
Prefixes: scroll-behavior. Example: scroll-behavior:auto. It emits scroll-behavior:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (2)
auto, smooth
overscroll-behavior
Interactive example.
Prefixes: overscroll-behavior, overscroll-behavior-x, overscroll-behavior-y, overscroll-behavior-inline, overscroll-behavior-block. Example: overscroll-behavior:auto. It emits overscroll-behavior:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (3)
auto, contain, none
scroll-margin
Interactive example.
Prefixes: scroll-m, scroll-m-x, scroll-m-y, scroll-m-inline, scroll-m-block, scroll-m-t, scroll-m-r, scroll-m-b, scroll-m-l, scroll-m-s, scroll-m-e, scroll-m-u, scroll-m-n. Example: scroll-m:1x. It emits scroll-margin:var(--spacing-1x);.
Documented values (10)
1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, [24px]
scroll-padding
Interactive example.
Prefixes: scroll-p, scroll-p-x, scroll-p-y, scroll-p-inline, scroll-p-block, scroll-p-t, scroll-p-r, scroll-p-b, scroll-p-l, scroll-p-s, scroll-p-e, scroll-p-u, scroll-p-n. Example: scroll-p:1x. It emits scroll-padding:var(--spacing-1x);.
Documented values (9)
1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x
scroll-snap-type
Interactive example.
Prefixes: scroll-snap-type. Example: scroll-snap-type:none. It emits scroll-snap-type:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (16)
none, x, y, both, block, inline, x-mandatory, y-mandatory, both-mandatory, block-mandatory, inline-mandatory, x-proximity,
y-proximity, both-proximity, block-proximity, inline-proximity
scroll-snap-align
Interactive example.
Prefixes: scroll-snap-align. Example: scroll-snap-align:none. It emits scroll-snap-align:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
none, start, end, center
scroll-snap-stop
Interactive example.
Prefixes: scroll-snap-stop. Example: scroll-snap-stop:normal. It emits scroll-snap-stop:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (2)
normal, always
scroll-marker-group
Interactive example. Maturity: experimental. Browser support: CSS Overflow Level 5 scroll navigation controls have limited browser support.
Prefixes: scroll-marker-group. Example: scroll-marker-group:none. It emits scroll-marker-group:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
none, before, after, links, tabs, [before_tabs]
scroll-target-group
Interactive example. Maturity: experimental. Browser support: CSS Overflow Level 5 scroll navigation controls have limited browser support.
Prefixes: scroll-target-group. Example: scroll-target-group:auto. It emits scroll-target-group:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (2)
auto, none
scroll-initial-target
Interactive example. Maturity: experimental. Browser support: CSS Scroll Snap Level 2 initial target selection has limited browser support.
Prefixes: scroll-initial-target. Example: scroll-initial-target:none. It emits scroll-initial-target:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (2)
none, nearest
scroll-timeline-name
Interactive example.
Prefixes: scroll-timeline-name. Example: scroll-timeline-name:none. It emits scroll-timeline-name:none;.
Documented values (3)
none, --reveal, --page
scroll-timeline-axis
Interactive example.
Prefixes: scroll-timeline-axis. Example: scroll-timeline-axis:block. It emits scroll-timeline-axis:block;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
block, inline, x, y
view-timeline-name
Interactive example.
Prefixes: view-timeline-name. Example: view-timeline-name:none. It emits view-timeline-name:none;.
Documented values (3)
none, --reveal, --page
view-timeline-axis
Interactive example.
Prefixes: view-timeline-axis. Example: view-timeline-axis:block. It emits view-timeline-axis:block;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
block, inline, x, y
view-timeline-inset
Interactive example.
Prefixes: view-timeline-inset. Example: view-timeline-inset:auto. It emits view-timeline-inset:auto;.
Documented values (4)
auto, 0, [10%], [auto_20%]
timeline-scope
Interactive example.
Prefixes: timeline-scope. Example: timeline-scope:none. It emits timeline-scope:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
none, --reveal, --page, [--reveal,--page], $scope