title: Scroll Snap only when scrolling down
body: <p>I am struggling with scroll-snap in CSS.</p>
  <p>Is there a way to use scroll-snap only in one vertical direction?</p>
  <p>I want to make it snap on every section when scrolling down, but not to snap when scrolling back up again.
  Is it possible inside CSS or do I need some JavaScript?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
      scroll-snap-type: y mandatory;
  }
  
  body {
      margin: 0;
      scroll-snap-type: y mandatory;
    }
    
    section {
      font-family: sans-serif;
      font-size: 12ch;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      scroll-snap-align: start; 
    }
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;head&gt;
  
      &lt;!-- MAIN STYLE --&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      
  
    &lt;/head&gt;
  
      &lt;main&gt;
       &lt;section&gt;
          &lt;h1&gt;Hello!&lt;/h1&gt;
       &lt;/section&gt;
  
       &lt;section&gt;
          &lt;h1&gt;Toodles~&lt;/h1&gt;
       &lt;/section&gt;
  
       &lt;section&gt;
          &lt;h1&gt;Boodles~&lt;/h1&gt;
       &lt;/section&gt;
              
      &lt;/main&gt;
  
  &lt;/html&gt; </code></pre>
  </div>
  </div>
  </p>