scroll snap

[nairnandu]

Description

The scroll-snap feature provides properties that allow developers to create snap points, and to control the panning and scrolling behavior between them. Snap points make content snap into position as the user scrolls overflowing content within a scroll container. When snap points don’t behave as expected, the end user experience can be jarring and visually jumpy (jumping from snap point to snap point), or sticky (sticks always to next snap point even with a fling gesture).

Interop 2023 carryover evaluation: #471

cc: @vmpstr @DavMila

Specification

https://drafts.csswg.org/css-scroll-snap-1/

web-feature

https://web-platform-dx.github.io/web-features-explorer/features/scroll-snap/

Test Links

feature:scroll-snap

Additional Signals

Standards Positions:

• Implemented in all browsers

Browser Bugs:

• Chromium
• Mozilla
• WebKit

Developer Surveys:

• “Have used [scroll-snap] but bothers me a little that the actual transition/animation is a little different across browsers, would be nice to be able to pick how it should animate. Also it was a big issue for us that it doesn't work well with a mouse on desktop, causing us to need to settle for a different solution in the end” (comment no:9 with Interactions > Scroll Snap, State of CSS 2023)
• 2024 State of CSS - “Broken or inconsistent behaviour in some browsers.” (comment no:21 for scroll snap)
• 2025 State of CSS - “I'm glad to have such a capability, but the "stickiness" varies across different browsers and operating systems.” (comment no: 4), “Browser implementation for this seems to be inconsistent” (comment no: 14)

Additional Signals:

• Scroll-snap-type is used on ~15% of page loads
• 2021 scrolling survey report:
  • 43% reported it’s somewhat or extremely difficult to work with scrolling
  • 55% reported scrollable areas as very or extremely important

[github-actions]

This comment was automatically generated based on the information you provided. Please don't edit it.

Below is additional information about the web feature (from the web-features project) which is referenced in your proposal.
If this doesn't accurately correspond to your proposal, please update your initial comment to include web-features: <feature-id>.
To find feature IDs, use the web-features explorer.

Feature Scroll snap

• ID: scroll-snap
• Name: Scroll snap
• Description: CSS scroll snap controls the panning and scrolling behavior within a scroll container.
• Baseline status: Widely Available
• Docs: CSS scroll snap
• Chrome use counter: chromestatus.com
• State of CSS/JS/HTML surveys: State of CSS 2025 (features question), State of CSS 2024 (features question)
• Included in previous Interop iterations: 2022, 2023
• WPT tests: wpt.fyi/results/?q=feature:scroll-snap
• More information: See the web-features explorer

[theres-waldo]

• WPT tests: wpt.fyi/results/?q=feature:scroll-snap

This query currently includes snapevent-constructor.html but that actually belongs in #1107.

[wpt-interop]

Thank you for proposing scroll snap for Interop 2026.

We are pleased to let you know that it has been accepted as part of the Scroll snap focus area.

You’ll be able to track progress on this topic throughout the year via the Interop 2026 dashboard.

Posted on behalf of the Interop team.