title: CSS/JavaScript - Scroll snap when user starts scrolling
body: <p>I recently found <a href="https://kuon.space" rel="nofollow noreferrer">this website</a> that uses scroll snapping. I looked into it and found that <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap" rel="nofollow noreferrer">CSS supports this</a>. However, it looks like snapping happens after the user stops scrolling. The same applies with the <a href="https://stackoverflow.com/a/60325796">answer to this question</a>.</p>
  
  <p>The next thing I tried was using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo" rel="nofollow noreferrer">window.scrollTo</a> and <a href="https://www.npmjs.com/package/react-scroll" rel="nofollow noreferrer"><code>react-scroll</code></a>, but both of these weren't as smooth as the website I've linked as an example since the user could still "fight" the scrolling by scrolling in the other direction.</p>
  
  <p>I want it to scroll snap when the user <em>starts</em> scrolling. How can I do this with CSS or JavaScript?</p>