CSS 快速滚动工作的基本必需品是什么？

Question

我一直在尝试实现一个超级简单的水平快照滚动（如此处所示：https://css-tricks.com/practical-css-scroll-snapping），但我一直都失败了。我可能已经搜索了这里的所有问题和答案，但 none 对我有帮助。

我的代码非常简单，我只在父级上声明 scroll-snap-type: y mandatory; 并在子级上声明 scroll-snap-align: center;。而且我很确定这不是浏览器问题（因为我已经在许多不同的浏览器上尝试过了）。我在这里错过了什么？或者我有什么不明白的？

这是我的（无法使用的）CodePen：https://codepen.io/anon/pen/XyNNGY

html:

<div class='parent'>
  <div class='child'>Section 1</div>
  <div class='child two'>Section 2</div>
  <div class='child'>Section 3</div>
</div>

css:

  body {
    margin: 0;
  }

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

  .child {
    scroll-snap-align: center;
    width: 100vw;
    height: 100vh;
    background-color: pink;
  }

  .two {
    background-color: crimson;
  }

已经感谢一百万了。

Answer 1

像这样尝试。

body {
  margin: 0;
}

.parent {
  max-height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.child {
  scroll-snap-align: center;
  height: 100vh;
  background-color: pink;
}

.child:nth-child(even) {
  background-color: crimson;
}

<div class='parent'>
  <div class='child'>Section 1</div>
  <div class='child'>Section 2</div>
  <div class='child'>Section 3</div>
</div>

Answer 2

您指定为滚动捕捉容器的元素必须是附加滚动条的元素。在您的情况下，父元素没有滚动条 - 滚动条属于视口并且父元素正在扩展超过视口的大小而不生成自己的滚动条。因此，scroll-snap-type 属性应应用于 body（或 html），而不是父项：

body {
  margin: 0;
  scroll-snap-type: y mandatory;
}

.child {
  scroll-snap-align: center;
  width: 100vw;
  height: 100vh;
  background-color: pink;
}

.two {
  background-color: crimson;
}

<div class='parent'>
  <div class='child'>Section 1</div>
  <div class='child two'>Section 2</div>
  <div class='child'>Section 3</div>
</div>

CSS 快速滚动工作的基本必需品是什么？

What are the bare necessities for CSS snap scroll to work?

html

css

scroll-snap-points