时间戳

首页 > 解决方案 > 鼠标“单击并拖动”滚动行为和 CSS 滚动捕捉

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

问题描述

我正在构建一个简单的滑块动画，该动画使用本机 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事件上，并切换 scroll-snap 属性。

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

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

标签： javascriptcssanimationsliderscroll-snap

解决方案

推荐阅读