滚动界限坐标 | scroll-snap-coordinate

scroll-snap-coordinate

弃用

该功能已从Web标准中删除。尽管一些浏览器可能仍然支持，但它正在被丢弃。避免使用它并尽可能更新现有的代码; 请参阅本页面底部的兼容性表格来指导您的决定。请注意，此功能可能随时停止工作。

scroll-snap-coordinate CSS属性定义将与最近的祖先滚动容器的对准元件内的x和y坐标的位置scroll-snap-destination为各自的轴线。

如果元素已被转换，则以相同方式转换捕捉坐标，以便在捕捉点与元素对齐时显示。

/* 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;

初始值	none
适用于	所有元素
遗传	没有
百分比	请参阅元素的边框
媒体	互动
计算值	如指定的那样，但相对长度转换为绝对长度
动画类型	一个位置
规范的顺序	形式语法定义的独特的非模糊顺序

语法

值

none指定该元素不参与捕捉点。

形式语法

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

例

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;
}

规范

Specification	Status	Comment
CSS Scroll Snap Module Level 1The definition of 'scroll-snap-coordinate' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	?	39.0 (39.0)	No support	No support	No support

Feature	Android	Firefox Mobile (Gecko)	Firefox OS	IE Phone	Opera Mobile	Safari Mobile
Basic support	No support	39.0 (39.0)1	39.0 (39.0)	No support	No support	No support