-ms-scroll-snap-points-x property

Article
01/11/2017

Defines where snap-points will be located along the x-axis.

This property is read/write.

Syntax

-ms-scroll-snap-points-x: snapInterval(<start length>, <step length>) | snapList(<list lengths>)

Property values

One of the following values.

snapInterval(<start length>, <step length>)
Specifies a starting snap-point, and then the interval at which the other snap-points will be placed.
- <start length> specifies where the first snap-point will be placed. This length value is either a floating-point number followed by a supported length unit or a percentage (a number followed by a percent sign (%)).
- <step length> specifies the distance between subsequent snap-points both to the left and the right of the initial snap-point. This length value is either a floating-point number followed by a supported length unit or a percentage (a number followed by a percent sign (%)).
snapList(<list lengths>)
Specifies the positions of individual snap-points as a comma-separated list of length values (either a floating-point number followed by a supported length unit or a percentage (a number followed by a percent sign (%)).
- If any value specified in <list lengths> is less than that specified by the -ms-scroll-limit-x-min property, the value of -ms-scroll-limit-x-min is used.
- If any value specified in <list lengths> is greater than that specified by the -ms-scroll-limit-x-max property, the value of -ms-scroll-limit-x-max is used.

CSS information

Applies To	non-replaced block-level elements and non-replaced inline-block elements
Media	interactive
Inherited	no
Initial Value	snapInterval(0px, 100%);

Remarks

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.

This property requires Windows 8 or later.

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-y property behaves identically to the -ms-scroll-snap-points-x property, but along the y-axis.)

<style>
.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-content-zoom-limit-min: 100%;
  -ms-content-zoom-limit-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;
}
</style>

Share via