scroll-snap-type
Quick Summary for scroll-snap-type
scroll-snap-type
CSS property sets how strictly snap points are enforced on the scroll container in case there is one.
Code Usage for scroll-snap-type
/* Keyword values */ scroll-snap-type: none; scroll-snap-type: x; scroll-snap-type: y; scroll-snap-type: block; scroll-snap-type: inline; scroll-snap-type: both; /* Optional mandatory | proximity*/ scroll-snap-type: x mandatory; scroll-snap-type: y proximity; scroll-snap-type: both mandatory; /* etc */ /* Global values */ scroll-snap-type: inherit; scroll-snap-type: initial; scroll-snap-type: unset;
More Details for scroll-snap-type
scroll-snap-type
The scroll-snap-type
CSS property sets how strictly snap points are enforced on the scroll container in case there is one.
Specifying any precise animations or physics used to enforce those snap points is not covered by this property but instead left up to the user agent.
/* Keyword values */ scroll-snap-type: none; scroll-snap-type: x; scroll-snap-type: y; scroll-snap-type: block; scroll-snap-type: inline; scroll-snap-type: both; /* Optional mandatory | proximity*/ scroll-snap-type: x mandatory; scroll-snap-type: y proximity; scroll-snap-type: both mandatory; /* etc */ /* Global values */ scroll-snap-type: inherit; scroll-snap-type: initial; scroll-snap-type: unset;
Syntax
Values
none
When the visual viewport of this scroll container is scrolled, it must ignore snap points.
x
The scroll container snaps to snap positions in its horizontal axis only.
y
The scroll container snaps to snap positions in its vertical axis only.
block
The scroll container snaps to snap positions in its block axis only.
inline
The scroll container snaps to snap positions in its inline axis only.
both
The scroll container snaps to snap positions in both of its axes independently (potentially snapping to different elements in each axis).
mandatory
The visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled. That means it snaps on that point when the scroll action finished, if possible. If content is added, moved, deleted or resized the scroll offset will be adjusted to maintain the resting on that snap point.
proximity
The visual viewport of this scroll container may come to rest on a snap point if it isn't currently scrolled considering the user agent's scroll parameters. If content is added, moved, deleted or resized the scroll offset may be adjusted to maintain the resting on that snap point.
Formal definition
Initial value | none |
---|---|
Applies to | all elements |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
none | [ x | y | block | inline | both ] [ mandatory | proximity ]?
Examples
Snapping in different axes
HTML<div class="holster"> <div class="container x mandatory-scroll-snapping" dir="ltr"> <div>X Mand. LTR</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="container x proximity-scroll-snapping" dir="ltr"> <div>X Prox. LTR</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="container y mandatory-scroll-snapping" dir="ltr"> <div>Y Mand. LTR</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="container y proximity-scroll-snapping" dir="ltr"> <div>Y Prox. LTR</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="container x mandatory-scroll-snapping" dir="rtl"> <div>X Mand. RTL</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="container x proximity-scroll-snapping" dir="rtl"> <div>X Prox. RTL</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="container y mandatory-scroll-snapping" dir="rtl"> <div>Y Mand. RTL</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="container y proximity-scroll-snapping" dir="rtl"> <div>Y Prox. RTL</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </div>
CSS /* setup */ html, body, .holster { height: 100%; } .holster { display: flex; align-items: center; justify-content: space-between; flex-flow: column nowrap; font-family: monospace; } .container { display: flex; overflow: auto; outline: 1px dashed lightgray; flex: none; } .container.x { width: 100%; height: 128px; flex-flow: row nowrap; } .container.y { width: 256px; height: 256px; flex-flow: column nowrap; } /* scroll-snap */ .x.mandatory-scroll-snapping { scroll-snap-type: x mandatory; } .y.mandatory-scroll-snapping { scroll-snap-type: y mandatory; } .x.proximity-scroll-snapping { scroll-snap-type: x proximity; } .y.proximity-scroll-snapping { scroll-snap-type: y proximity; } .container > div { text-align: center; scroll-snap-align: center; flex: none; } .x.container > div { line-height: 128px; font-size: 64px; width: 100%; height: 128px; } .y.container > div { line-height: 256px; font-size: 128px; width: 256px; height: 100%; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.3; font-size: 64px; } /* coloration */ .container > div:nth-child(even) { background-color: #87EA87; } .container > div:nth-child(odd) { background-color: #87CCEA; }
ResultsSpecifications
Specification |
---|
CSS Scroll Snap Module Level 1 # scroll-snap-type |
See also
CSS Scroll Snap Well-Controlled Scrolling with CSS Scroll SnapLast modified: Aug 14, 2021, by MDN contributors
Select your preferred language English (US)Français日本語Русский中文 (简体) Change language