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.

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

What you need to do is change what can be scrolled. If your page is big enough where left/right scrolling makes sense, the browser will allow it be scrolled that way.

Basically, if you only want them scrolling in a certain direction, only make content in that direction. If necessary, you can achieve this by having a container div of the specific size you want with overflow set to none.