This is the Standard reference for scrolling.
It follows the authored TeaCSS vocabulary at source revision
fa3709a for package version 0.7.1.
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