鼠标“单击并拖动”滚动行为和 CSS 滚动捕捉

Question

我正在构建一个简单的滑块动画，该动画使用本机 CSS 滚动快照和滚动事件侦听器进行控制。 您可以在此处查看工作示例：https://codepen.io/juliangarnier/pen/10d5ad6a2d9bf2cbac8e8d2e289153fa 我正在尝试在桌面上添加单击和拖动行为，不幸的是，当通过 JavaScript 更新 scrollLeft 值时，CSS scroll-snap 无法正常工作。 它的工作原理是在用户开始拖动时设置 scroll-snap-type: none; 但移除平滑捕捉动画。

我注意到在 Chrome 开发工具中模拟触摸事件时，滚动动画在使用鼠标时效果很好。 我想知道是否有可能重新创建 Chrome 开发工具在纯 JS 中使用的相同类型的触摸事件模拟。 或者，如果有人设法在保持捕捉动画的同时手动更新 scroll-snap-type: x mandatory; 元素的滚动位置。

编辑：

这是使用鼠标事件的示例的更新版本

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

在 mouseup 事件上，并切换 scroll-snap 属性。

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

它非常接近我想要的效果，但仍然缺少使用普通滚动手势时出现的滚动动量。