Scroll Indicator
A named native scroll region with an optional decorative position track outside its viewport.
When to use it. Use it to hint at local scrolling through a bounded content region. Do not use it to measure reading, task completion, loading or numeric progress.
Scroll Indicator primary example
How it works
-
<.scroll_indicator>One source and one instance-local decoration. There is no progressbar, percentage, live region, reading state, synchronized value or external scroll-target selector. Caller content is neither cloned nor hidden. -
package CSSPackage CSS applies scoped shadcn-style tokens, layout, focus, and state presentation without changing the native contract. -
gallery onlyTheme switching, source copying, search, fixtures, and inspection controls on this page belong to the gallery only; :scroll_indicator does not ship them. -
application boundaryShadcnUI does not add application state, authorization, persistence, transport events, or a JavaScript behavior layer to this component.
Examples use package semantic tokens in explicit light and dark scopes.
Accessibility and browser support
The named region is a Tab stop. Native arrows, Page Up/Down, Home/End, wheel and touch remain available according to browser behavior. Child links and forms keep native semantics. The aria-hidden track cannot cover content or focus and has no accessibility-tree value.
| Feature | Locked-engine evidence | When missing |
|---|---|---|
| Native baseline | Reviewed in the locked Chromium, Firefox, and WebKit evidence matrix. | The track stays neutral for short/nonoverflowing content, missing joint scroll-timeline/range/scope support, forced colors, motion=:none, an ancestor reduce scope or OS reduced motion. Nested system cannot re-enable it. Missing CSS retains the full document. No script supplies a fallback. Stationary sources never advance decoration; there is no timer, listener, observer, polling or perpetual animation. Native scroll and focus can reset on replacement. |
| Exact fallback | The locked-engine matrix retains the documented native or static outcome. | The track stays neutral for short/nonoverflowing content, missing joint scroll-timeline/range/scope support, forced colors, motion=:none, an ancestor reduce scope or OS reduced motion. Nested system cannot re-enable it. Missing CSS retains the full document. No script supplies a fallback. Stationary sources never advance decoration; there is no timer, listener, observer, polling or perpetual animation. Native scroll and focus can reset on replacement. |
Application ownership and API
You own trusted content, headings, link destinations, form actions and scroll/focus restoration after replacement. The native example input only edits a local draft; reset restores its default and nothing is saved.
Attributes and item slots. Required unique id, exactly one accessible_label/labelledby (existing caller heading IDs), and trusted inner_block. Optional escaped description, size=:small|:default|:large (12rem/20rem/32rem max height; default 20rem), motion=:system|:none, class/rest. Unrelated globals survive; required names, role, focus, CSS identity and motion markers are protected. No numeric value, arbitrary size or CSS selector input.
Provenance
Catalogue identity motion.scroll-indicator, adapted from
unscripted/ui commit bd8f403030c8d1f46804da6eda733fde7e908e63
under its MIT notice.
The documentation presentation is adapted locally; ShadcnUI's Phoenix API and native semantic contract remain authoritative.
Use a named focusable native region and external aria-hidden decoration, encoded local timeline identity and joint timeline/range/scope gates. Keep zero-width neutral fill for absent capabilities, short content and suppression; omit reading completion claims, scroll containment and runtime.