title: CSS Scroll-Snap API?
body: <p>I am curious...do the CSS scroll-snap properties have a API (events) that can be hooked into via JavaScript?</p>
  <p>I am tinkering with the idea of creating a website that uses scroll-snap to move between 100vh &quot;slides&quot;. After each slide is done &quot;scroll-snapping&quot; I would like to trigger an animation.</p>
  <p>I am sure there are crafty ways I could check each &quot;slide&quot; to see if it is taking 100% of the viewport, but that sort of sucks. It would be far better to fire a function after the scroll event is complete.</p>
  <p>Here is a super simple example:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    let slideNumber = $('.container &gt; .slide').length;
    if (slideNumber &gt; 0) {
      $('.container &gt; .slide').each(function() {
        $('#dotNav').append('&lt;li&gt;&lt;a href="#slide' + $(this).index() + '"&gt;&lt;/a&gt;&lt;/li&gt;');
      });
    }
  
    //DO SOMETHING AFTER SCROLL-SNAP IS COMPLETE. 
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
      &amp;: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;
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
    &lt;div class="slide" id="slide0"&gt;
      &lt;h2&gt;Slide 1&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="slide" id="slide1"&gt;
      &lt;h2&gt;Slide 2&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="slide" id="slide2"&gt;
      &lt;h2&gt;Slide 3&lt;/h2&gt;
    &lt;/div&gt;
    &lt;ul id="dotNav"&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>You can see it working here:</p>
  <p><a href="https://codepen.io/trafficdaddy/pen/BMGBBg" rel="nofollow noreferrer">https://codepen.io/trafficdaddy/pen/BMGBBg</a></p>
  <p>Hope someone out there has an answer! :)</p>