Question

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

在触控板上左右移动两根手指时，网站页面左/右滚动。现在我们实现了触摸板控制，两个手指向上/向下移动，页面向左/向右滚动。

如何使用两个手指从上/下移动到左/右以使用js或jQuery左/右滚动网站页面来更改触控板控制？

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

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

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

Answer 2

通常当您想要接管脚本中的触摸事件时，您可以添加类似这样的内容以防止通常的滚动和缩放：

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

Answer 3

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

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

触摸板上的双指滚动js

3 个答案: