触摸板上的两指滚动js答案

【问题标题】：Two-fingered scroll js on touchpad触摸板上的两指滚动js
【发布时间】：2017-06-12 22:49:52
【问题描述】：

我们开发了一个具有水平方向的网站，并希望通过两根手指向左/向右移动来实现触摸板控制。

当您在触摸板上向左/向右移动两根手指时，网站页面正在向左/向右滚动。现在我们已经实现了用两根手指向上/向下移动和向左/向右滚动页面的触摸板控制。

我们如何使用 js 或 jQuery 用两根手指从上/下到左/右移动来改变触摸板控制来左右滚动网站页面？

【问题讨论】：

不是由操作系统（或浏览器）而不是网站处理滚动吗？

标签： javascript jquery touchpad

【解决方案1】：

我可能有点晚了，但在我偶然发现这个问题之前有同样的问题。进一步调查使我认为捕获触控板滚动的最佳选择是wheel 事件。

function doScroll(e) {
    // positive deltas are top and left
    // down and right are negative

    // horizontal offset    e.deltaX
    // vertical offset      e.deltaY

    console.log(`x:${e.deltaX} y:${e.deltaY}`);

    e.preventDefault(); // disable the actual scrolling
}

window.addEventListener("wheel", doScroll, false);

我已经准备好了a fiddle，它会告诉您滚动方向和偏移值，但会阻止滚动本身。

wheel event 有一个 delta 属性（至少在 Chrome 中）对动量敏感，并为您提供当前的相对滚动偏移量，而不是 scroll 事件中可用的绝对滚动位置。

【讨论】：

有点晚了，但有点棒。

【解决方案2】：

通常当你想在脚本中接管触摸事件时，你添加这样的东西来防止通常的滚动和缩放：

$("body").bind("touchstart", function(e) {
    e.preventDefault();
})

【讨论】：

知道了。但是如何在基于 WebKit 引擎的浏览器（例如，Safari）中检测/监听 MacOs 机器上触摸板上的两个手指的事件？我想捕获这些事件以防止该浏览器中的默认滚动操作。

【解决方案3】：

您需要做的是更改可以滚动的内容。如果您的页面足够大，可以向左/向右滚动，浏览器将允许它以这种方式滚动。

基本上，如果您只想让它们朝某个方向滚动，则只在该方向上制作内容。如有必要，您可以通过将溢出设置为无的特定大小的容器 div 来实现。

【讨论】：