CSS - scroll-snap-points-x

The scroll-snap-points-x CSS property defines the horizontal positioning of snap points within the content of the scroll container they are applied to.

Example

 

HTML Content

HTML
<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

CSS Content

CSS
#container {
  width: 200px;
  overflow: auto;
  white-space: nowrap;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-type: mandatory;
  font-size: 0;
}

#container > div {
  width: 200px;
  height: 200px;
  display: inline-block;
  line-height: 200px;
  text-align: center;
  font-size: 100px;
}

#container > div:nth-child(even) {
  background-color: #87ea87;
}

#container > div:nth-child(odd) {
  background-color: #87ccea;
}

Syntax  

CSS
/* Keyword value */
scroll-snap-points-x: none;

/* Repeating snap points */
scroll-snap-points-x: repeat(400px);

/* Global values */
scroll-snap-points-x: inherit;
scroll-snap-points-x: initial;
scroll-snap-points-x: unset;

Values

none
The scroll container does not define any snap points. Elements within the scroll container may still define snap points on behalf of the scroll container.
repeat(<length>)
Defines an interval at which snap points are defined, starting from the container's relevant start edge. Only positive lengths are allowed.

Formal syntax

CSS
none <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> repeat(<a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a>)

Description  

The scroll-snap-points-x CSS property defines the horizontal positioning of snap points within the content of the scroll container they are applied to.

Initial valuenone
Applies toscroll containers
Inheritedno
Percentagesrelative to same axis of the padding-box of the scroll container
Mediainteractive
Computed valueas specified, but with relative lengths converted into absolute lengths
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support ? 39.0 (39.0) Not supported Not supported 9-webkit
Feature Android Firefox Mobile (Gecko) Firefox OS IE Phone Opera Mobile Safari Mobile
Basic support Not supported 39.0 (39.0)[1] 39.0 (39.0) Not supported Not supported 9-webkit

[1] On Firefox Mobile, available since Gecko 39, but behind the preference layout.css.vertical-text.enabled, disabled by default.

 

This property was once defined in the early draft of CSS Scroll Snap Points Module but later removed from the specification in favor of element-based snapping.

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/scroll-snap-points-x

CSS CSS Property CSS Scroll Snap Points Experimental Reference