javascript - 触摸板上的两指滚动js

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

我准备了一个小提琴，告诉你滚动方向和偏移值，但会阻止滚动本身。

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

Answer 2

Usually when you want to take over touch events in script, you add something like this to prevent the usual scroll and zoom:

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

Answer 3

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

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