scroll‑start Property Playground - Online Carousel Initial Snap

scroll-start is a CSS property that defines the initial scroll position alignment for a scroll container. It determines where the scrollable content starts when the page first loads or when the container is first rendered. It is part of the CSS Scroll Snap Module Level 2 specification.

The shorthand scroll-start sets both scroll-start-x (horizontal) and scroll-start-y (vertical). Accepted values include auto, start, center, end, and any valid <length-percentage> value like 200px or 50%.

They serve different roles in scroll snapping:

• scroll-start — Set on the container. Controls the initial alignment of the scroll offset when the container first renders. It only affects the starting position, not ongoing scroll behavior.
• scroll-snap-align — Set on the child items. Defines where snap points sit on each child (start, center, or end). It governs where the container "locks" during all scroll interactions.

Think of scroll-snap-align as defining the snap targets, while scroll-start picks which target is initially aligned and how.

Use scroll-start when you want to control the first impression of your carousel:

• Center the middle card — Use scroll-start-x: center to show the middle item centered, suggesting there's more content on both sides (great for product galleries).
• Start at the beginning — Use scroll-start-x: start for a traditional left-aligned carousel start.
• Highlight a featured item — Use a pixel value like scroll-start-x: 300px to jump to a specific promotional card.
• Onboarding flows — Center the first step to reduce cognitive load and focus attention.

As of 2024, scroll-start is an emerging feature with support in Chrome 129+ and other Chromium-based browsers. Firefox and Safari are expected to follow as the CSS Scroll Snap Module Level 2 matures.

For broader compatibility, you can use progressive enhancement: set an initial scrollLeft via JavaScript as a fallback, and let the CSS property take over in supporting browsers. Always test in your target browsers.

⚠️ Check caniuse.com for latest support data

Absolutely! Use scroll-start-y for vertical scroll containers. This is useful for:

• Long-scroll landing pages where you want the initial view centered on a hero section
• Vertical card stacks or list views
• Full-screen scroll snap layouts (e.g., scroll-snap-type: y mandatory with scroll-start-y: center)

The shorthand scroll-start accepts two values: the first for scroll-start-x and the second for scroll-start-y (e.g., scroll-start: start center;).

These properties address different aspects of scroll snapping:

• scroll-start — Sets the initial alignment of the scroll offset. It's about where the container starts.
• scroll-padding — Creates an offset inset within the scroll container's snap area. Snap targets align to this inset edge rather than the container's actual edge. Useful for avoiding fixed headers or creating breathing room.

They can be used together: scroll-padding ensures snap targets clear a sticky header, while scroll-start determines which target is initially shown and how it's aligned.

No. scroll-start only affects the initial rendering of the scroll container. Once the user interacts with the scroll container (dragging, swiping, using scroll buttons), scroll-start has no further influence. The user's scroll position is preserved and respected.

This makes it different from JavaScript-based solutions that might fight with user input. It's a declarative, one-time initial positioning hint to the browser.

In SPAs, scroll-start applies on initial render. To "reset" to the scroll-start position after navigation or state changes, you have a few options:

• Re-mount the container — Use a key prop (React/Vue) to force re-creation of the DOM element, triggering the initial scroll-start behavior again.
• JavaScript fallback — Use element.scrollTo({ left: targetPosition, behavior: 'smooth' }) to programmatically reset, matching your desired scroll-start value.
• CSS + JS hybrid — Keep scroll-start as the declarative default and use JS resets for in-session navigation.

Besides the keyword values, scroll-start accepts:

• Length values — e.g., 200px, 3rem, 10vw. Sets an exact initial scroll offset from the start edge.
• Percentage values — e.g., 50%. Calculated relative to the scrollable overflow area. 50% would center the scrollable content.
• auto — The default. The browser determines the initial scroll position (usually 0).

You can mix units per axis: scroll-start: 100px center; sets scroll-start-x: 100px and scroll-start-y: center.

They are both part of the CSS Scroll Snap module but serve different purposes:

• scroll-start — Controls the initial scroll alignment when the container first renders.
• scroll-snap-stop — Set on child items (normal or always). When set to always, it forces the scroll to stop at that snap point even during fast/inertial scrolling, preventing users from skipping past it.

They can complement each other: use scroll-start to set the initial view and scroll-snap-stop: always on key items to ensure users see them during scrolling.