-ms-scroll-snap-points-x

CSS
CSS Reference

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The -ms-scroll-snap-points-x CSS property is a Microsoft extension that specifies where snap-points will be located along the x-axis.

Initial value	`snapInterval(0px, 100%)`
Applies to	non-replaced block-level elements and non-replaced inline-block elements
Inherited	no
Computed value	as specified
Animation type	discrete

Syntax

Values

Note: a <length-percentage> is a value that can be either a <length> or a <percentaqe>.

snapInterval( <length-percentage>, <length-percentage> )

Specifies a starting snap-point followed by the interval between all snap-points.

The first value specifies where the first snap-point will be placed.
The second value specifies the distance between subsequent snap-points both to the left and the right of the initial snap-point.

snapList( <length-percentage># )

Specifies the position of individual snap-points as a comma-separated list of values, each of which represents a zoom factor.

If any value is less than -ms-scroll-limit-x-min , then -ms-scroll-limit-x-min is used.
If any value is greater than -ms-scroll-limit-x-max, then -ms-scroll-limit-x-max is used.

Formal syntax

  snapInterval( <length-percentage>, <length-percentage> ) | snapList( <length-percentage># )where 
<length-percentage> = <length> | <percentage>

Examples

This example demonstrates both types of values for the -ms-scroll-snap-points-x property. In the first selector, the first snap-point is at 0%, and the interval is set to 100%. In the second selector, each snap-point is listed separately — 100%, 200%, 300%, and so on. (The -ms-scroll-snap-points-x property behaves identically to the -ms-scroll-snap-points-y property, but along the x-axis.)

.container {
  overflow-x: auto;
  overflow-y: hidden;
  -ms-scroll-snap-type: mandatory;
  -ms-scroll-snap-points-x: snapInterval(0%, 100%);
  width: 480px;
  height: 270px;
}

.imageContainer {
  -ms-scroll-chaining: chained;
  -ms-overflow-style: none;
  -ms-content-zooming: zoom;
  -ms-scroll-rails: none;
  -ms-scroll-limit-x-min: 100%;
  -ms-scroll-limit-x-max: 500%;
  -ms-scroll-snap-type: proximity;
  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
  -ms-overflow-style: none;
  width: 480px;
  height: 270px;
  overflow: auto;
}

Specifications

Not part of any specification.

Remarks

This property requires Windows 8 or later.

This property has no effect on non-scrollable elements.

Starting with Windows 8.1, this property is also supported for mouse, keyboard, and touchpad interaction.