我有水平滚动面板(通过overflow-x:scroll)，用户应该能够通过拖动来滚动它(不仅仅是滚动条，还有内容本身)。
使用一些可拖动轮播库(例如 owlcarousel )不是一个选项，因为它们都使用变换而不是 native 滚动。
所以我的计划是:
- 绑定(bind)
mousedown事件 - 更改
mousemove上的水平滚动偏移 - 在
mouseup处停止所有操作
在桌面上一切都很好。但问题出在移动设备上，因为移动浏览器会触发假的 mousedown 和 mousemove 事件 - 滚动被损坏。如果我在 touchstart/move 中调用 preventDefault - 假鼠标事件停止触发，但 Pane 也不滚动。
有没有办法在不调用 e.preventDefault() 的情况下防止移动设备上出现虚假 mousedown/move/up 事件？
感谢您的任何意见!
最佳答案
引用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 毫秒内)发生的事件事件。
关于javascript - 可拖动滚动和移动设备上的潜在问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49686881/