触控板上的双指滚动js [英] Two-fingered scroll js on touchpad

问题描述

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

We have developed a site whcih has a horizontal orientation and are wanting to implement touchpad control with two fingers move left/right.

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

When you move two fingers left/right on touchpad, the site page is being scrolled left/right. Now we have implemented touchpad control with two fingers move up/down and page scrolled left/right.

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

How can we change touchpad control with two fingers move from up/down to left/right to scroll site page left/right using js or jQuery?

推荐答案

在我偶然发现这个问题之前，我可能会有点迟到但有同样的问题。
稍微进一步的调查让我觉得捕获触控板滚动的最佳选择是 wheel 事件。

I may be a little late but had the same question before I stumbled over this question. A little further investigation lead me to think that the best bet to capture trackpad scrolling would be the wheel event.

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

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

I have prepared a fiddle that tells you the scroll direction and offset values but prevents the scrolling itself.

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

The wheel event has a delta property that (at least in Chrome) is sensitive to momentum and gives you the current relative scroll offset rather than the absolute scroll position available in the scroll event.

这篇关于触控板上的双指滚动js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！