javascript - 移动设备上的可拖动滚动和潜在问题

Question

我有水平滚动面板(通过 overflow-x:scroll)，用户应该能够通过拖动来滚动它(不仅仅是滚动条​​，还有内容本身)。

使用一些可拖动的旋转木马库(例如 owlcarousel )不是一种选择，因为它们都使用变换而不是原生滚动。

所以我的计划是:

• 绑定(bind)mousedown事件
• 更改 mousemove 上的水平滚动偏移量
• 在 mouseup 处停止所有操作>

在桌面上一切都很好。但问题出在移动设备上，因为移动浏览器会触发伪造的 mousedown 和 mousemove 事件 - 滚动已损坏。如果我在 touchstart/move 中调用 preventDefault - 假鼠标事件停止触发，但 Pane 也不滚动。

有什么方法可以在不调用 e.preventDefault() 的情况下防止手机上的假 mousedown/move/up 事件？

感谢任何输入!

Answer 1

引用 W3C :

To avoid processing the same interaction twice for touch (once for the touch event, and once for the compatibility mouse events), developers should make sure to cancel the touch event, suppressing the generation of any further mouse or click events. Alternatively, see the InputDeviceCapabilities API for a way to detect mouse events that were generated as a result of touch events.

不幸的是，这似乎在任何浏览器中都不可用(还没有？)。

---

一个更可行的可能性是disable touch scrolling在你的元素上，让你的鼠标处理代码负责滚动:

.my-panel {
  touch-action: none;
}

---

如果这使得滚动在移动设备上变得过于卡顿，一个笨拙但可能有效的解决方案可能是忽略任何 mousemove在 touchmove 之后不久(例如，在 100 毫秒内)发生的事件事件。