html - 使用滚动捕捉时的延迟

Question

我正在尝试使用滚动捕捉在每个部分之间滚动并使该部分适合视图。但是，当我滚动和该部分捕捉时会有某种延迟。这很奇怪，因为如果我将完全相同的代码放入 codepen（或下面的代码片段），则不会发生延迟。当我使用 codepen 时尝试更具体，我的滚轮的每一步都会滚动到一个新部分。但是，当我不使用 codepen 并且只运行我的 html 文件时，滚动捕捉仅在我停止滚动或向下或向上滚动一步时才会发生，但仅在感觉像 750 毫秒延迟之后才会发生。任何帮助将非常感激。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Helvetica', sans-serif;
}


/* All the snapping stuff */

.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
}

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


/* Other styles */

section {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: darkorchid;
}

section:nth-child(2n) {
  background-color: turquoise;
}

section:nth-child(3n) {
  background-color: tomato;
}

<div class="scroll-container">
  <section>
    <h2>Section 1</h2>
  </section>
  <section>
    <h2>Section 2</h2>
  </section>
  <section>
    <h2>Section 3</h2>
  </section>
  <section>
    <h2>Section 4</h2>
  </section>
</div>

标签： htmlcss