滚动界限终点 | scroll-snap-destination (Scroll Snap)

  CSS 中文开发手册

滚动界限终点 | scroll-snap-destination (Scroll Snap) - CSS 中文开发手册

scroll-snap-destination

弃用

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

scroll-snap-destination CSS属性定义滚动容器的视觉范围内的x和y坐标的位置视哪个元素捕捉点与对准。

/* <position> value */
scroll-snap-destination: 400px 600px;

/* Global values */
scroll-snap-destination: inherit;
scroll-snap-destination: initial;
scroll-snap-destination: unset;

Initial value	0px 0px
应用对象	scroll containers
是否可继承	no
百分比值	relative to same axis of the padding-box of the scroll container
媒体	interactive
计算值	as specified, but with relative lengths converted into absolute lengths
动画类型	a position
规范顺序	the unique non-ambiguous order defined by the formal grammar

语法

值

<position>从滚动容器的可视视口的起始边缘指定捕捉目标的偏移量。第一个值给出了捕捉目标的x坐标，第二个值是其y坐标。

形式语法

<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 destination0">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </div>

  <div>
    <p>At coordinate (25, 0)</p>
    <div class="scrollContainer destination25">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </div>

  <div>
    <p>At coordinate (50, 0)</p>
    <div class="scrollContainer destination50">
      <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 {
   100px;
  overflow: auto;
  white-space: nowrap;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-type: mandatory;
  scroll-snap-destination: 20px 0;
  font-size: 0;
}

.destination0 {
  scroll-snap-destination: 0 0;
}

.destination25 {
  scroll-snap-destination: 25px 0;
}

.destination50 {
  scroll-snap-destination: 50px 0;
}

.scrollContainer > div {
   100px;
  height: 100px;
  display: inline-block;
  line-height: 100px;
  text-align: center;
  font-size: 50px;
}

.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-destination' 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-destination (Scroll Snap) – CSS 中文开发手册 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/css/32117.html