CSS Scroll Snapping，垂直不起作用

Question

我用了this article作为引用点，特别是this working snippet ，但在我的页面(下面的脚本)中，垂直快照滚动不起作用。为什么？

.parent {
  height: 100vh;
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
}

section {
  height: 100vh;
  scroll-snap-align: start;
  position: relative;
}

.one {
  background-color: red;
}

.two {
  background-color: blue;
}

.three {
  background-color: grey;
}

.four {
  background-color: green;
}

<div class="parent row">
  <section class="one">
  </section>
  <section class="two">
  </section>
  <section class="three">
  </section>
  <section class="four">
  </section>
</div>

Answer 1

代码片段中的主要问题是显示的滚动条属于 body，其中没有定义 scroll-snap 属性。这就是滚动时没有任何吸附行为的原因。

为了达到预期的效果，您需要

1. 确保显示的滚动条属于父div
2. 定义父容器的溢出行为滚动

下面是一个工作示例

请注意，考虑到吸附属性(适用于 Chrome)已经发展，并且您正在使用已弃用的功能。查看CSS scroll snap on Google developers .

另请注意，此答案仅涉及 Chrome，没有 polyfill部分。这只是这里涉及的主要滚动概念。

html,
body {
  height: 100vh;
  overflow: hidden;
}

.parent {
  overflow: scroll;
  height: 100vh;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
}

section {
  height: 100vh;
  scroll-snap-align: start;
  position: relative;
}

.one {
  background-color: red;
}

.two {
  background-color: blue;
}

.three {
  background-color: grey;
}

.four {
  background-color: green;
}

<div class="parent row">
  <section class="one"></section>
  <section class="two"></section>
  <section class="three"></section>
  <section class="four"></section>
</div>