前端

滚动界限坐标 | scroll-snap-coordinate (Scroll Snap) – CSS 中文开发手册 – Break易站

云博小周宇2 Mins Read 
  • ??CSS 中文开发手册

    滚动界限坐标 | scroll-snap-coordinate (Scroll Snap) – CSS 中文开发手册

    弃用

    该功能已从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指定该元素不参与捕捉点。

    <position>指定从元素边框的起始边缘开始的对齐坐标的偏移量。对于每个配对，第一个值给出快照坐标的x坐标，第二个值给出它的y坐标。

    形式语法

    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

    		 
  • ??CSS 中文开发手册

  • ??本文标题：
    滚动界限坐标 | scroll-snap-coordinate (Scroll Snap) – CSS 中文开发手册 – Break易站 转载请保留页面地址：https://www.breakyizhan.com/css/32113.html