--- title: scroll-snap-points-y slug: Web/CSS/scroll-snap-points-y tags: - CSS - css snap translation_of: Web/CSS/scroll-snap-points-y ---
{{CSSRef}}{{SeeCompatTable}}{{deprecated_header}}

摘要

scroll-snap-points-y CSS属性定义滚动容器中内容的snap点的垂直位置。

{{cssinfo}}

语法

/* 关键值 */
scroll-snap-points-y: none;

/* 重复的snap点 */
scroll-snap-points-y: repeat(400px);

/* 全局值 */
scroll-snap-points-y: inherit;
scroll-snap-points-y: initial;
scroll-snap-points-y: unset;

Values

none
滚动容器没有定义任何snap点。Elements within the scroll container may still define snap points of behalf of the scroll container.（i don't understand this statement）
repeat(<长度>)
定义snap点的一个间隔，从容器相关的边缘开始。仅允许正数长度。

正式语法

{{csssyntax}}

示例

HTML内容

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

CSS内容

#container {
  height: 200px;
  width: 220px;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-points-y: repeat(200px);
  scroll-snap-type: mandatory;
  font-size: 0;
}

#container > div {
  width: 200px;
  height: 200px;
  display: inline-block;
  line-height: 200px;
  text-align: center;
  font-size: 100px;
}

#container > div:nth-child(even) {
  background-color: #87EA87;
}

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

{{EmbedLiveSample("Example", 220, 220)}}

规范

此属性曾定义在early draft of CSS Scroll Snap Points Module中，但是后来在in favor of element-based snapping规范中被移出。

浏览器兼容性

{{Compat("css.properties.scroll-snap-points-y")}}