CSS - scroll-snap-points-y

Example

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

#container {
  height: 200px;
  width: 220px;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-points-y: repeat(200px);
  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  

/* Keyword value */
scroll-snap-points-y: none;

/* Repeated snap points */
scroll-snap-points-y: repeat(400px);

/* Global values */
scroll-snap-points-y: inherit;
scroll-snap-points-y: initial;
scroll-snap-points-y: 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

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-y CSS property defines the vertical positioning of snap points within the content of the scroll container they are applied to.

Browser Compatibility  

[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