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.