msScrollSnapPointsX property

Article
05/02/2017

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

This property is read/write.

Syntax

HRESULT put_msScrollSnapPointsX(
  [in]  DOMString val
);

HRESULT get_msScrollSnapPointsX(
  [out] DOMString **ptr
);

Property values

Type: DOMString

String format

snapInterval(<start length>, <step length>) | snapList(<list lengths>)

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 IHTMLCSSStyleDeclaration2::msScrollSnapPointsX 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 IHTMLCSSStyleDeclaration2::msScrollSnapPointsY property behaves identically to the IHTMLCSSStyleDeclaration2::msScrollSnapPointsX 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>

Requirements

IDL	Mshtml.idl

Share via