为什么我的简单CSS滚动快照不起作用？

我尝试使用滚动捕捉功能，但它就是不起作用。我很困惑-我做错了什么

HTML:

提前谢谢

---

首先，代码不够，现在代码太多，我需要更多的文本。。。我不知道还有什么要说的

滚动捕捉类型在指定给body元素时似乎不起作用。 您可以通过将其分配给html标记来修复它：

html {
  scroll-snap-type: y mandatory;
}
body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 80%;
    margin: auto; 
}

但有一个问题：这曾经工作得很好，但在Chrome中表现得很奇怪，因为我最近更新了81版，问题从昨天开始

另一种方法是将所有内容包装在容器元素中，并为其指定滚动捕捉类型：

.body {
    margin: 0; /* prevents a double scroll bar */
}
.scrollsnap-container {
    max-height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: mandatory; /* for older browsers */
    scroll-snap-points-y: repeat(100vh); /* for older browsers */
    scroll-snap-type: y mandatory;
  }
  .scrollsnap-section {
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
  }

这似乎对我更有效

html {
  scroll-snap-type: y mandatory;
}
body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 80%;
    margin: auto; 
}

.body {
    margin: 0; /* prevents a double scroll bar */
}
.scrollsnap-container {
    max-height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: mandatory; /* for older browsers */
    scroll-snap-points-y: repeat(100vh); /* for older browsers */
    scroll-snap-type: y mandatory;
  }
  .scrollsnap-section {
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
  }

<div class="scrollsnap-container">
    <section id="slide-1" class="scrollsnap-section">
      <h2>slide 1</h2>
    </section>
    <section id="slide-2" class="scrollsnap-section">
      <h2>slide 2</h2>
    </section>
    <section id="slide-3" class="scrollsnap-section">
      <h2>slide 3</h2>
    </section>
    <section id="slide-4" class="scrollsnap-section">
      <h2>slide 4</h2>
    </section>
    <section id="slide-5" class="scrollsnap-section">
      <h2>slide 5</h2>
    </section>
  </div>