IndexedSnapScroller

Overview

IndexedSnapScroller inherits its styling contract from SnapScroller and SnapScrollerContent. It does not define additional component-local CSS, so most styling decisions should happen in the base scroller layer or at the rendered page content.

Public CSS Variables

There are no dedicated component-local CSS variables in the current implementation.

For global theming guidance, see Themes and CSS Variables.

Part-Level Variables

Root

Uses the SnapScroller scroll-snap container and its existing scroll, gap, and snap behavior.

Content

Uses SnapScrollerContent behavior through IndexedSnapScrollerContent.

Any visual shell inside the page still belongs to the rendered child subtree, not to IndexedSnapScroller itself.

State And Variant Interaction

• Styling is structural and inherited from the base snap scroller.
• Indexed behavior changes content identity and paging, not the visual contract.
• preserveScroll, size, and shift affect paging behavior rather than exposing new design tokens.

Examples

Three pages per view

Each page takes a third of the viewport minus the gaps. When several pages are visible at once, raise size so the window always holds pages beyond the visible ones on both sides.

import {
  IndexedSnapScroller,
  IndexedSnapScrollerContent,
  Text,
  useIndexedSnapScrollerContext,
} from '@vega-ui/react';

const today = new Date();
const dayFormat = new Intl.DateTimeFormat('en-US', { weekday: 'short', day: 'numeric' });

function ForecastDay() {
  const { index } = useIndexedSnapScrollerContext();

Do Not Override

• inventing indexed-scroller CSS APIs that do not exist in source
• treating the component as visually different from the base snap scroller without product intent