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?

Isn't scrolling handled by the OS (or the browser) not the website? — gen_Eric, Apr 02 '12 at 14:01

score 10 · Answer 1 · answered Jun 12 '17 at 14:49

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.

little late, but a little great. – rome Feb 21 '19 at 18:14 — rome, Feb 21 '19 at 18:14

score 0 · Answer 2 · answered Apr 02 '12 at 15:19

0

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

answered Apr 02 '12 at 15:19

Scott Evernden

39,136
15
78
84

Got it.But how can i detect/listen events of two fingers on touchpad on MacOs machines in browsers that are built on WebKit engines (for example, Safari)? I want catch these events to prevent then the defoult scrolling actions in this browser. – Tatiana Starol Aug 20 '12 at 13:09

score -1 · Answer 3 · answered Apr 02 '12 at 15:09

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.

Two-fingered scroll js on touchpad

3 Answers3

Linked