如何使用滚动快照实现垂直滚动？

Question

我想实现垂直滚动，其效果与第2节和第3节中的here相似。我有一个工作原理非常相似的代码（在文章末尾的摘要中），但我想要以便能够像我发送的第一个示例一样更早地滚动到下一部分。
另外，我想在具有某些内容的页面中滚动，然后滚动到整页滑块。滚动完成后，继续滚动到下一个没有快照滚动效果的部分。

我试图从第一部分中删除scroll-snap-align: start，但随后它直接进入下一部分。

const gra = function(min, max) {
  return Math.random() * (max - min) + min;
}
const init = function() {
  let items = document.querySelectorAll('section');
  for (let i = 0; i < items.length; i++) {
    items[i].style.background = randomColor({
      luminosity: 'light'
    });
  }
  cssScrollSnapPolyfill()
}
init();

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
}

section {
  border-bottom: 1px solid white;
  padding: 1rem;
  height: 100vh;
  scroll-snap-align: start;
  text-align: center;
  position: relative;
}

h1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: white;
  width: 100%;
  left: 0;
  font-size: calc(1rem + 3vw);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.5.2/randomColor.js"></script>
<script src="https://bundle.run/css-scroll-snap-polyfill@0.1.2"></script>
<section>
  <h1>Section One</h1>
</section>
<section class='one'>
  <h1>Section Two</h1>
</section>
<section class='two'>
  <h1>Section Three</h1>
</section>
<section class='three'>
  <h1>Section Four</h1>
</section>
<section>
  <h1>Section Five</h1>
</section>