scroll-snap-coordinate

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
相关话题

过时
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

scroll-snap-coordinate CSS property defines the x and y coordinate positions within an element that will align with its nearest ancestor scroll container's scroll-snap-destination for each respective axis.

/* Keyword value */
scroll-snap-coordinate: none;
/* <position> values */
scroll-snap-coordinate: 50px 50px;                   /* Single coordinate */
scroll-snap-coordinate: 100px 100px, 100px bottom;   /* Multiple coordinates */
/* Global values */
scroll-snap-coordinate: inherit;
scroll-snap-coordinate: initial;
scroll-snap-coordinate: unset;

If the element has been transformed, the snap coordinates are likewise transformed, thus aligning the snap points with the element as it is displayed.

句法

值

none
<position>

形式定义

初始值	`none`
适用于	所有元素
继承	no
百分比	refer to the element’s border box
计算值	as specified, but with relative lengths converted into absolute lengths
动画类型	a position

形式句法

none | <position>#where 
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
where 
<length-percentage> = <length> | <percentage>

范例

Setting scroll snap coordinates

HTML

<div id="container">
  <div>
    <p>At coordinate (0, 0)</p>
    <div class="scrollContainer coordinate0">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </div>
  <div>
    <p>At coordinate (25, 0)</p>
    <div class="scrollContainer coordinate25">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </div>
  <div>
    <p>At coordinate (50, 0)</p>
    <div class="scrollContainer coordinate50">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </div>
</div>

CSS

#container {
  display: flex;
}
#container > div:nth-child(-n+2) {
  margin-right: 20px;
}
.scrollContainer {
  width: 100px;
  overflow: auto;
  white-space: nowrap;
  scroll-snap-type: mandatory;
  font-size: 0;
}
.scrollContainer > div {
  width: 100px;
  height: 100px;
  display: inline-block;
  line-height: 100px;
  text-align: center;
  font-size: 50px;
}
.coordinate0 > div {
  scroll-snap-coordinate: 0 0;
}
.coordinate25 > div {
  scroll-snap-coordinate: 25px 0;
}
.coordinate50 > div {
  scroll-snap-coordinate: 50px 0;
}
.scrollContainer > div:nth-child(even) {
  background-color: #87ea87;
}
.scrollContainer > div:nth-child(odd) {
  background-color: #87ccea;
}

结果

规范

Not part of any standard.

浏览器兼容性

更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`scroll-snap-coordinate` 弃用非标	Chrome 不支持 No	Edge 不支持 No	Firefox 不支持 39 — 68	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 不支持 39 — 68	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

不支持
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。

元数据

最后修改： 2020 年 7 月 29 日

在此页

句法

值

形式定义

形式句法

范例

Setting scroll snap coordinates

HTML

CSS

结果

规范

浏览器兼容性

图例

相关话题