CSS Scroll Snapping，垂直不起作用

Question

我使用 这篇文章 作为参考，特别是 这个工作片段，但在我的页面（下面的脚本）中，垂直对齐滚动不起作用。为什么？

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

原文由 Micky 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

代码片段中的主要问题是显示的滚动条属于主体，其中没有定义滚动捕捉属性。这就是滚动时没有任何捕捉行为的原因。

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

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

下面是一个工作示例

请注意，请考虑捕捉属性（对于 Chrome）已经发展，并且您正在使用已弃用的功能。请参阅 Google 开发人员的 CSS 滚动快照。

另请注意，此答案仅涉及 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>

原文由 PIIANTOM 发布，翻译遵循 CC BY-SA 4.0 许可协议