当我有滚动捕捉类型时滚动捕捉不起作用：y;在身体标签上答案

【问题标题】：Scroll-snapping Dosent work when i have scroll-snap-type: y; on body tag当我有滚动捕捉类型时滚动捕捉不起作用：y;在身体标签上
【发布时间】：2021-08-09 09:32:25
【问题描述】：

所以我对滚动捕捉很感兴趣。我试着玩了一下，但没有用。我在 chrome 和 firefox 中尝试过，都没有成功。这是我的代码，请帮忙。

* {
  margin: 0;
  padding: 0;
}

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

header {
  height: 100vh;
  width: 100%;
  background: #ff0000;
  scroll-snap-align: start;
}

div {
  height: 100vh;
  width: 100%;
  background: blue;
  scroll-snap-align: start;
}

section {
  height: 100vh;
  width: 100%;
  background: yellow;
  scroll-snap-align: start;
}

<body>
  <header>
    <h1>
      Header
    </h1>
  </header>
  <div>
    <h1>
      Div
    </h1>
  </div>
  <section>
    <h1>
      Section
    </h1>
  </section>
</body>

【问题讨论】：

标签： javascript html css scroll-snap scroll-snap-type

【解决方案1】：

我会尝试确保 scroll-snap 中的所有元素都相同，即

[lots of other divs]

，或者，尽量不要使用 body 作为包装器，看看是否这有帮助。

Here is a doc with better explanation

编辑：我已经测试过了，包装器的大小需要和它的孩子一样大，你可以忽略我说的其他东西，但我仍然不建议下次使用 body 作为包装器.

【讨论】：

我试过了，但没有成功。 Here 是代码。 顺便说一句，我的浏览器是最新的。 @Robyn
啊，好吧，我编辑了小提琴。包装器的大小需要与其子级相同。我添加了 2 行：height: 100vh; width: 100%;。之后代码工作
哦，谢谢