Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

-ms-scroll-snap-points-x property

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 Tonon-replaced block-level elements and non-replaced inline-block elements
Mediainteractive
Inheritedno
Initial ValuesnapInterval(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>


See also

CSSStyleDeclaration
Windows Store apps using JavaScript Samples: HTML scrolling, panning and zooming sample
Internet Explorer Samples: Scrolling, panning, and zooming with touch input

 

 

Show:
© 2015 Microsoft