This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The scroll-snap-stop
CSS property defines whether the scroll container is allowed to "pass over" possible snap positions.
/* Keyword values */ scroll-snap-stop: normal; scroll-snap-stop: always; /* Global values */ scroll-snap-type: inherit; scroll-snap-type: initial; scroll-snap-type: unset;
Value not found in DB!
normal
always
Syntax not found in DB!
This example is duplicated from scroll-snap-type
with minor variances.
/* setup */ :root, body { height: 100%; 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; } /* definite scroll snap */ .mandatory-scroll-snapping { scroll-snap-stop: always; } .proximity-scroll-snapping { scroll-snap-stop: normal; } /* 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: 256px; } /* 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; }
<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 Proximity 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 Mandatory 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 Proximity 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>
Specification | Status | Comment |
---|---|---|
CSS Scroll Snap Module Level 1 The definition of 'scroll-snap-type' in that specification. | Candidate Recommendation | Initial definition |
No compatibility data found. Please contribute data for "css.properties.scroll-snap-stop" (depth: 1) to the MDN compatibility data repository.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-stop