触摸板上的两指滚动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);

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

该轮事件有一个三角形的属性，（在Chrome中至少）是动量敏感，给你的当前相对滚动偏移量，而不是在市场上绝对滚动位置scroll的事件。

Answer 2

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

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