鼠标“单击并拖动”滚动行为和 CSS 滚动对齐

Question

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

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

编辑：

这是该示例的更新版本，其中使用了鼠标事件

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

事件上mouseup，并切换滚动捕捉属性。

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

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