CSS Scroll-Snap API?

Question

Мне любопытно ... есть ли у свойств CSS scroll-snap API (события), которые можно подключить с помощью JavaScript?

Я возился с идеей создания веб-сайта, использующего scroll-оснастка для перемещения между 100vh "слайды".После того, как каждый слайд будет «прокручиваться», я хотел бы запустить анимацию.

Я уверен, что есть хитрые способы, которыми я мог бы проверить каждый «слайд», чтобы увидеть, занимает ли он 100% области просмотра,но это отстой.Было бы гораздо лучше запустить функцию после завершения события прокрутки.

Вот очень простой пример:

$(document).ready(function() {
  let slideNumber = $('.container > .slide').length;
  if (slideNumber > 0) {
    $('.container > .slide').each(function() {
      $('#dotNav').append('<li><a href="#slide' + $(this).index() + '"></a></li>');
    });
  }

  //DO SOMETHING AFTER SCROLL-SNAP IS COMPLETE. 
});

html {
  scroll-behavior: smooth;
}

body {
  box-sizing: border-box;
  scroll-snap-type: y mandatory;
}

.container {
  width: 100%;
  scroll-snap-type: y mandatory;
  position: relative;
  .slide {
    height: 100vh;
    width: 100%;
    background: #cccccc;
    scroll-snap-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000000;
    &:nth-child(odd) {
      background: blue;
      h2 {
        color: #ffffff;
      }
    }
    h2 {
      margin: 0;
      font-size: 40px;
      text-transform: uppercase;
    }
  }
  ul#dotNav {
    position: fixed;
    top: 50%;
    right: 20px;
    list-style: none;
    li {
      width: 20px;
      height: 20px;
      margin-bottom: 10px;
      cursor: pointer;
      a {
        display: block;
        width: 100%;
        height: 100%;
        background: #ffffff;
        border-radius: 50%;
      }
    }
    li.active {
      background: #000000;
    }
  }
}

<div class="container">
  <div class="slide" id="slide0">
    <h2>Slide 1</h2>
  </div>
  <div class="slide" id="slide1">
    <h2>Slide 2</h2>
  </div>
  <div class="slide" id="slide2">
    <h2>Slide 3</h2>
  </div>
  <ul id="dotNav">
  </ul>
</div>

Вы можете увидеть, как это работает здесь:

https://codepen.io/trafficdaddy/pen/BMGBBg

Надеюсь, у кого-то есть ответ!:)