title: Mouse "click and drag" scrolling behaviour and CSS scroll-snap
body: <p>I'm building a simple slider animation that is controlled using native CSS scroll-snap and a scroll eventListener.
  You can see a working example here: <a href="https://codepen.io/juliangarnier/pen/10d5ad6a2d9bf2cbac8e8d2e289153fa" rel="noreferrer">https://codepen.io/juliangarnier/pen/10d5ad6a2d9bf2cbac8e8d2e289153fa</a>
  I'm trying to add a click and drag behaviour on desktop, unfortunately CSS scroll-snap doesn't work well when the scrollLeft value is updated via JavaScript.
  It kind of works by setting <code>scroll-snap-type: none;</code> when the user starts dragging but remove the smooth snap animation.</p>
  <p>I noticed that when simulating touch events in Chrome dev tool, the scroll animation works perfectly when using the mouse.
  I'm wondering if it's possible to re-create the same kind of touch-events emulation that Chrome dev tools uses in pure JS.
  Or if anyone managed to manually update the scroll position of a <code>scroll-snap-type: x mandatory;</code> element while keeping the snapping animation.</p>
  <p>Edit:</p>
  <p>Here is an updated version of the example with mouse events using</p>
  <pre><code>el.scrollTo({
    left: newScrollLeft,
    behavior: 'smooth'
  })
  </code></pre>
  <p>on the <code>mouseup</code> event, and toggling the scroll-snap property.</p>
  <p><a href="https://codepen.io/juliangarnier/pen/b3bc58f943768f5276563ae7077e41e0?editors=0100" rel="noreferrer">https://codepen.io/juliangarnier/pen/b3bc58f943768f5276563ae7077e41e0?editors=0100</a></p>
  <p>It's pretty close to what I want, but still missing the scroll momentum present when using a normal scroll gesture.</p>