Как добиться вертикальной прокрутки с помощью scroll-snap?

Question

Я хотел бы добиться вертикальной прокрутки с аналогичным эффектом, который здесь в разделах 2 и 3. У меня есть код, который работает очень похожим образом (он находится во фрагменте в конце статьи), но Я хочу иметь возможность перейти к следующему разделу намного раньше, как в первом примере, который я отправил.
Кроме того, я хотел бы использовать прокрутку на странице с некоторым содержанием, а затем перейти к полному слайдеру страницы. После завершения прокрутки перейдите к следующим разделам без эффекта мгновенной прокрутки.

Я пытался удалить 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>