html - 如何让 CSS 滚动捕捉正常工作？

Question

我没有在我的元素中使用滚动捕捉。你能找到错误吗？我看了很多关于 CSS 滚动捕捉的视频和博客文章，但我看到的都是我已经尝试过的。我只是得到一个正常的滚动行为。

* {
  margin: 0;
  padding: 0;
}

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

.scrollchild {
  scroll-snap-align: start;
  background-color: #000000;
  height: 100vh;
}

.scrollchild:nth-of-type(even) {
  background: #ffffff;
}

<div class="scrollcontainer">
  <section class="scrollchild">
    <p>one</p>
  </section>
  <section class="scrollchild">
    <p>two</p>
  </section>
</div>

Answer 1

您唯一的问题是滚动不在滚动容器中，而是在主体中。 scrollcontainer 从不真正滚动。

这应该可以解决这个问题:

* {
    margin: 0;
    padding: 0;
}

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

.scrollchild {
    scroll-snap-align: start;
    background-color: #000000;
    height: 100vh;
}

.scrollchild:nth-of-type(even) {
    background: #ffffff;
}

<div class="scrollcontainer">
<section class="scrollchild">
  <p>one</p>
</section>
<section class="scrollchild">
  <p>two</p>
</section>
</div>