scroll-snap-type
Quick Summary for 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.
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 valuenone
Applies toall elements
Inheritedno
Computed valueas specified
Animation typediscrete

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; } 
Results

Specifications

Specification
CSS Scroll Snap Module Level 1 # scroll-snap-type

See also

CSS Scroll Snap Well-Controlled Scrolling with CSS Scroll Snap

Last modified: Aug 14, 2021, by MDN contributors

Select your preferred language English (US)Français日本語Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


Not Sure
Random CSS Property

:dir()

The :dir() CSS pseudo-class matches elements based on the directionality of the text contained in them.
:dir css reference