scroll-snap-type

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

摘要

scroll-snap-type CSS 属性定义在滚动容器中的一个临时点(snap point)如何被严格的执行。

此属性不能用来指定任何精确的动画或者物理运动效果来执行临时点,而是交给用户代理来处理。

/* 关键值 */
scroll-snap-type: none;
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/* 可选 mandatory | proximity*/
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

/* etc */

/* 全局值 */
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: unset;
初始值none
适用元素all elements
是否是继承属性
适用媒体interactive
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

取值

none
当这个滚动容器的可视的 viewport 是滚动的,它必须忽略临时点。
x
滚动容器只捕捉其水平轴上的捕捉位置。
y
滚动容器只捕捉其垂直轴上的捕捉位置。
block
滚动容器仅捕捉到其块轴上的捕捉位置。
inline
动容器仅捕捉到其内联轴上的捕捉位置。
both
滚动容器会独立捕捉到其两个轴上的位置(可能会捕捉到每个轴上的不同元素)
mandatory
如果它当前没有被滚动,这个滚动容器的可视视图将静止在临时点上。意思是当滚动动作结束,如果可能,它会临时在那个点上。如果内容被添加、移动、删除或者重置大小,滚动偏移将被调整为保持静止在临时点上。
proximity
如果它当前没有被滚动,这个滚动容器的可视视图将基于基于用户代理滚动的参数去到临时点上。如果内容被添加、移动、删除或者重置大小,滚动偏移将被调整为保持静止在临时点上。

正式语法

none | [ x | y | block | inline | both ] [ mandatory | proximity ]?

示例

HTML内容

<div class="holster">
<div class="container x mandatory-scroll-snapping" dir="ltr">
  <div>X Mand. LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container x proximity-scroll-snapping" dir="ltr">
  <div>X Prox. LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container y mandatory-scroll-snapping" dir="ltr">
  <div>Y Mand. LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container y proximity-scroll-snapping" dir="ltr">
  <div>Y Prox. LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container x mandatory-scroll-snapping" dir="rtl">
  <div>X Mand. RTL</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container x proximity-scroll-snapping" dir="rtl">
  <div>X Prox. RTL</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container y mandatory-scroll-snapping" dir="rtl">
  <div>Y Mand. RTL</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container y proximity-scroll-snapping" dir="rtl">
  <div>Y Prox. RTL</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
</div>

CSS内容

/* setup */
html, body, .holster {
  height: 100%;
}
.holster {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: monospace;
}

.container {
  display: flex;
  overflow: auto;
  outline: 1px dashed lightgray;
  flex: none;
}

.container.x {
  width: 100%;
  height: 128px;
  flex-flow: row nowrap;
}

.container.y {
  width: 256px;
  height: 256px;
  flex-flow: column nowrap;
}
/* scroll-snap */
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}

.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}

.y.proximity-scroll-snapping {
  scroll-snap-type: y proximity;
}

.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

.x.container > div {
  line-height: 128px;
  font-size: 64px;
  width: 100%;
  height: 128px;
}

.y.container > div {
  line-height: 256px;
  font-size: 128px;
  width: 256px;
  height: 100%;
}
/* appearance fixes */
.y.container > div:first-child {
  line-height: 1.3;
  font-size: 64px;
}
/* coloration */
.container > div:nth-child(even) {
  background-color: #87EA87;
}

.container > div:nth-child(odd) {
  background-color: #87CCEA;
}

规范

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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
scroll-snap-typeChrome Full support 69Edge Full support 12
Prefixed Notes
Full support 12
Prefixed Notes
Prefixed Implemented with the vendor prefix: -ms-
Notes Edge supports an earlier draft of CSS Scroll Snap without axis values.
Firefox Full support 68
Full support 68
No support 39 — 68
Notes
Notes An earlier draft of CSS Scroll Snap without axis values.
IE Full support 10
Prefixed Notes
Full support 10
Prefixed Notes
Prefixed Implemented with the vendor prefix: -ms-
Notes Internet Explorer supports an earlier draft of CSS Scroll Snap without axis values.
Opera Full support 56Safari Full support 11
Full support 11
Full support 9
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Older Safari versions support an earlier draft of CSS Scroll Snap without axis values.
WebView Android Full support 69Chrome Android Full support 69Firefox Android Full support 68
Full support 68
No support 39 — 68
Notes
Notes An earlier draft of CSS Scroll Snap without axis values.
Opera Android Full support 48Safari iOS Full support 11
Full support 11
Full support 9
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Older Safari versions support an earlier draft of CSS Scroll Snap without axis values.
Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.