scroll-snap-destination

在此页

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

过时
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-destination CSS property defines the position in x and y coordinates within the scroll container's visual viewport which element snap points align with.

/* <position> value */
scroll-snap-destination: 400px 600px;
/* Global values */
scroll-snap-destination: inherit;
scroll-snap-destination: initial;
scroll-snap-destination: unset;

句法

值

<position>

形式定义

初始值	`0px 0px`
适用于	scroll containers
继承	no
百分比	relative to same axis of the padding-box of the scroll container
计算值	as specified, but with relative lengths converted into absolute lengths
动画类型	a position

形式句法

<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 destination

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 {
  width: 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 {
  width: 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;
}

结果

规范

Not part of any standard.

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 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-destination` 弃用非标	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 destination

HTML

CSS

结果

规范

浏览器兼容性

图例

相关话题