触摸板上的双指滚动JS

Question

我们开发了一个水平方向的网站，并希望实现使用两根手指在触摸板上左右移动的控制。

当您在触摸板上用两个手指向左/向右滑动时，网站页面将被左/右滚动。现在我们已经使用两个手指向上/向下移动并使页面左/右滚动来实现了触摸板控制。

如何使用js或jQuery将触摸板控制从上/下移动改为左/右移动，以滚动网站页面左/右？

- Tatiana Starol

---

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

Answer 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);

我准备了一个fiddle，告诉你滚动的方向和偏移量，但不会进行滚动本身。

滚轮事件有一个delta属性，在Chrome浏览器中至少对于惯性敏感，并且提供了相对滚动偏移量而非在scroll事件中可用的绝对滚动位置。

- Torsten Walter

---

有点晚了，但还是很棒的。 - rome

Answer 2

通常情况下，当您想在脚本中接管触摸事件时，您会添加类似以下代码以防止常规滚动和缩放：

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

- Scott Evernden

---

明白了。但是我该如何在使用 WebKit 引擎（例如 Safari）的浏览器中检测/监听 MacOs 机器上触摸板上两个手指的事件？我想捕获这些事件以防止在此浏览器中进行默认滚动操作。 - Tatiana Starol

Answer 3

你需要做的是改变可滚动的内容。如果你的页面足够大，左右滚动是有意义的，浏览器将允许按该方向滚动。

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

- Brad