Two-fingered scroll js on touchpad

Question

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.

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?

Answer 1

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.

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.