滚动捕捉不适用于以下代码。我如何解决它？（我正在使用最新版本的 chrome）答案

【问题标题】：Scroll snapping does not work with the following code. How do I fix it? (I am using newest version of chrome)滚动捕捉不适用于以下代码。我如何解决它？（我正在使用最新版本的 chrome）
【发布时间】：2021-05-17 14:50:18
【问题描述】：

我想弄清楚为什么我的滚动快照代码不起作用。你能帮我修改一下代码吗？

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Website</title>
  </head>
  <body>
    <section>
      <h3>header 1</h3>
    </section>
    <section>
      <h3>header 2</h3>
    </section>
  </body>
</html>

以下是CSS代码：

body {
  scroll-snap-type: y mandatory;
  scroll-padding-top: 15vh;
  overflow-y: scroll;
}

section{
  height: 100vh;
  scroll-snap-align: start;
}

【问题讨论】：

标签： html css google-chrome web scroll

【解决方案1】：

您的代码中的问题是溢出发生在 html 元素上，而不是您正在考虑作为 scrol-snap 容器的 body。

html {
  overflow: hidden;
}

body {
  scroll-snap-type: y mandatory;
  scroll-padding-top: 15vh;
  overflow-y: auto;
  height: 100vh;
}

section{
  height: 100vh;
  scroll-snap-align: start;
}

<section>
  <h3>header 1</h3>
</section>
<section>
  <h3>header 2</h3>
</section>

【讨论】：

【解决方案2】：

sections 需要 container。在这种情况下，我将<main> 作为container。

html,
body {
  height: 100%;
}

main {
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

section {
  height: 100vh;
  scroll-snap-align: start;
}

<main>
  <section>
    <h3>header 1</h3>
  </section>
  <section>
    <h3>header 2</h3>
  </section>
</main>

在 Codepen 上查看它：https://codepen.io/manaskhandelwal1/pen/LYbxazG?editors=1100

【讨论】：

非常感谢！你知道有没有办法用鼠标滚轮而不是右侧的滚动条滚动？