Html CSS滚动捕捉

我知道这个问题以前可能已经得到了回答，但我已经找了4个小时，找不到有效的答案。抱歉，如果这是多余的

我正在尝试创建一个网站，其中的网页被划分为几个分区，每个分区的高度和宽度都与整个页面相同。我想使用CSS滚动捕捉一次加载一整页div。我使用的是wordpress主题，因此我无法直接访问总体div布局或正文等。因此，我的想法是在页面内创建一个自定义html div，并在其中构建我的页面

然而，我无法让我的概念证明工作。我已经成功地将滚动控制从body中移除，但div根本不滚动，更不用说快照了

我对这方面还不太熟悉，所以非常感谢您的任何帮助或反馈。提前谢谢。 另外，正如我所说的，我是新手，还没有开始学习JavaScript。但我已经读到，这是可能的纯CSS

编辑：我使用Firefox88来显示，但我也尝试了Chrome90

代码如下：

正文{
保证金：0；
溢出：隐藏；
}
.母货柜组{
滚动捕捉类型：y必填；
高度：100vh；
溢出y：滚动；
宽度：100vw；
}
.全科{
滚动捕捉对齐：开始；
高度：100vh；
宽度：100vw；
位置：相对位置；
}
.满：第n个孩子（奇数）{
背景：#333；
}

CSS实践
弗斯特
第二
第三

弗斯特
第二
第三
身体{
保证金：0；
溢出：隐藏；
}
.父容器{
滚动捕捉类型：y必填；
溢出y：滚动；
高度：100vh；
宽度：100vw；
}
.满{
滚动捕捉对齐：开始；
高度：100vh；
宽度：100vw；
位置：相对位置；
}
.满：第n个孩子（奇数）{
背景：#333；
}

工作样本：

---

从中删除div选择器。规则中的完全选择器似乎有效。

非常感谢！我不知道我为什么要把它们包括在内。就像我说的，很新。

<div class="parent-container">
  <div class="full">First</div>
  <div class="full">Second</div>
  <div class="full">Third</div>
</div>

body {
  margin: 0;
  overflow: hidden;
}
.parent-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
  width: 100vw;
}
.full {
  scroll-snap-align: start;
  height: 100vh;
  width: 100vw;
  position: relative;
}
.full:nth-child(odd) {
  background: #333;
}