EN
Este contenido no se encuentra disponible en su idioma, pero aquí tiene la versión en inglés.

-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.

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

 

 

Mostrar:
© 2014 Microsoft