13 KiB
| title | chunk | source | category | tags | date_saved | instance |
|---|---|---|---|---|---|---|
| Scroll snap - Glossary | MDN | 1/3 | https://developer.mozilla.org/en-US/docs/Glossary/Scroll_snap | reference | web, html, css, javascript, documentation | 2026-05-05T05:44:45.948617+00:00 | kb-cron |
MDN HTML HTML: Markup language
HTML reference
HTML guides
Markup languages
CSS reference
CSS guides
Layout cookbook
JavaScriptJS JavaScript: Scripting language
JS reference
JS guides
Web APIs Web APIs: Programming interfaces
Web API reference
Web API guides
- Using the Web animation API
- Using the Fetch API
- Working with the History API
- Using the Web speech API
- Using web workers
Technologies
Topics
Learn Learn web development
Frontend developer course
- Getting started modules
- Core modules
- MDN Curriculum
- Check out the video course from Scrimba, our partner
Learn HTML
Learn CSS
Learn JavaScript
Tools Discover our tools
About Get to know MDN better
Scroll snap
Scroll snapping is when content "snaps" to a specific position, rather than stopping at any random point, when a scroll operation finishes. Normal scrolling operations lack precision. They don't align to a paragraph, a sentence, or an image boundary. For example, in a carousel, a scrolling operation could finish in the middle of an image, leaving it partially visible. Web developers have long relied on JavaScript-based solutions. Browsers have recently started supporting CSS scroll-snapping features that enable defining scroll-snap containers and snapping behaviors. Scroll snapping is a well-controlled scrolling experience, whereby developers define an element as a scroll container with boundaries for scroll operations. Scroll operations then finish at these snap position boundaries, with the scrolled to content snapping into place. In the above carousel example, as the user finishes scrolling the carousel, its visible image will snap into place.
The scroll snap container is a scroll container with scroll snapping applied. For example, if a box has overflowing content and a scroll-snap-type set to a value other than none, then the box captures snap positions. A box's scroll snap container is the element's nearest snap-position capturing scroll container ancestor. If a box has no scroll snap container, its snap positions, if any, will not trigger snapping.
The snapport is the area of the scrollport that is used as the alignment container for the scroll snap areas when calculating snap positions. By default, it is the same as the scroll container's visual viewport, but is the area of the scrollport defined by the scroll-padding property. The snap areas are aligned to the scrollport.
The snap area of an element in a scroll container is the area defined using scroll-margin outsets specified on the element. The snap area is used to snap the element to its snapport.
A descendant element inside a scroll snap container that is snapped to when the container scrolls. The scroll-snap-align property defines the snap position of each snap target.