We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

scroll-snap-coordinate

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

摘要

scroll-snap-coordinate CSS属性结合元素的最近的祖先元素滚动容器的scroll-snap-destination 定义的轴,定义了元素中x和y坐标偏移的位置。

如果元素已经变型,snap坐标也以相同的方式进行变型,为了使元素的snap点向元素一样被显示。

初始值none
适用元素all elements
是否是继承属性
Percentagesrefer to the element’s border box
适用媒体interactive
计算值as specified, but with relative lengths converted into absolute lengths
Animation typea position
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

/* 关键值 */
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;

赋值

none
定义元素不提供一个snap点。
<position>
定义从元素核模型边框边缘开始偏移的snap坐标。每一对值中,第一个值给定了snap坐标的x坐标,第二个值为它的y坐标。

正式语法

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>

示例

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

规范

规范名称 状态 评论
CSS Scroll Snap Module Level 1
scroll-snap-coordinate
Candidate Recommendation Initial definition

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
支持度 ? 39.0 (39.0) 未实现 未实现 未实现
特性 Android Firefox Mobile (Gecko) Firefox OS IE Phone Opera Mobile Safari Mobile
支持度 未实现 39.0 (39.0)[1] 39.0 (39.0) 未实现 未实现 未实现

[1] 在Firefox移动版上,从内核Gecko 39开始可用,但是低于 layout.css.vertical-text.enabled优先级,默认不可用。

文档标签和贡献者

标签: 
此页面的贡献者: rockywen
最后编辑者: rockywen,