javascript - Mouse "click and drag" scrolling behaviour and CSS scroll-snap

Question

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: https://codepen.io/juliangarnier/pen/10d5ad6a2d9bf2cbac8e8d2e289153fa 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 scroll-snap-type: none; when the user starts dragging but remove the smooth snap animation.

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 scroll-snap-type: x mandatory; element while keeping the snapping animation.

Edit:

Here is an updated version of the example with mouse events using

el.scrollTo({
  left: newScrollLeft,
  behavior: 'smooth'
})

on the mouseup event, and toggling the scroll-snap property.

https://codepen.io/juliangarnier/pen/b3bc58f943768f5276563ae7077e41e0?editors=0100

It's pretty close to what I want, but still missing the scroll momentum present when using a normal scroll gesture.

question from:https://stackoverflow.com/questions/65902323/mouse-click-and-drag-scrolling-behaviour-and-css-scroll-snap

Answer 1

Waitting for answers