Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 807227 of scroll-snap-coordinate

  • Revision slug: Web/CSS/scroll-snap-coordinate
  • Revision title: scroll-snap-coordinate
  • Revision id: 807227
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment
Tags: 

Revision Content
{{CSSRef}}{{SeeCompatTable}}

Summary

The scroll-snap-coordinate CSS property defines the positions in x and y coordinates within the element which will align with the nearest ancestor scroll container's {{cssxref("scroll-snap-destination")}} for the respective axis.

If the element has been transformed, the snap coordinate is transformed in the same way in order to align the snap point with the element as it is displayed.

{{cssbox("scroll-snap-coordinate")}}

Syntax

scroll-snap-coordinate: none
scroll-snap-coordinate: 50px 50px
scroll-snap-coordinate: 100px 100px, 100px bottom

scroll-snap-coordinate: inherit
scroll-snap-coordinate: initial
scroll-snap-coordinate: unset

Values

none
Specifies that the element does not contribute to a snap point.
<position>
Specifies the offset of the snap coordinates from the start edge of the element’s border box. For each pairing, the first value gives the x coordinate of the snap coordinate, the second value its y coordinate.

Formal syntax

Formal syntax: {{csssyntax("scroll-snap-coordinate")}}

Specification

Specification Status Comment
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-coordinate", "scroll-snap-coordinate")}} {{Spec2("CSS Scroll Snap Points")}} Initial definition

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{CompatUnknown}} {{CompatGeckoDesktop("39.0")}}[1] {{CompatNo}} {{CompatNo}} {{CompatNo}}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatNo}} {{CompatGeckoMobile("39.0") }}[1] {{CompatNo}} {{CompatNo}} {{CompatNo}}

[1] Available since Gecko 39, but behind the preference layout.css.vertical-text.enabled, disabled by default.

See also

  • {{CSS_Reference:Scroll_Snap_Point_Properties}}

Revision Source

 
<div>{{CSSRef}}{{SeeCompatTable}}</div>

<h2 id="Summary">Summary</h2>

<p>The <code>scroll-snap-coordinate</code> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> property defines the positions in x and y coordinates within the element which will align with the nearest ancestor scroll container's {{cssxref("scroll-snap-destination")}} for the respective axis.</p>

<p>If the element has been transformed, the snap coordinate is transformed in the same way in order to align the snap point with the element as it is displayed.</p>

<div>{{cssbox("scroll-snap-coordinate")}}</div>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: css">scroll-snap-coordinate: none
scroll-snap-coordinate: 50px 50px
scroll-snap-coordinate: 100px 100px, 100px bottom

scroll-snap-coordinate: inherit
scroll-snap-coordinate: initial
scroll-snap-coordinate: unset
</pre>

<h3 id="Values" name="Values">Values</h3>

<dl>
 <dt><code>none</code></dt>
 <dd>Specifies that the element does not contribute to a snap point.</dd>
 <dt><code>&lt;position&gt;</code></dt>
 <dd>Specifies the offset of the snap coordinates from the start edge of the element’s border box. For each pairing, the first value gives the x coordinate of the snap coordinate, the second value its y coordinate.</dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("scroll-snap-coordinate")}}
</pre>

<h2 id="Specification">Specification</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-coordinate", "scroll-snap-coordinate")}}</td>
   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("39.0")}}<sup><a href="#compat_hint1">[1]</a></sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile("39.0") }}<sup><a href="#compat_hint1">[1]</a></sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p><a id="compat_hint1" name="compat_hint1">[1]</a> Available since Gecko 39, but behind the preference <code>layout.css.vertical-text.enabled</code>, disabled by default.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{CSS_Reference:Scroll_Snap_Point_Properties}}</li>
</ul>
Revert to this revision