CODEWITHSUNDEEP
javascriptjquerytouchpad
Tatiana Starol
Tatiana Starol

Reputation: 121

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.

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?

Upvotes: 6

Views: 14837

Answers (3)

Torsten Walter
Torsten Walter

Reputation: 5802

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.

Upvotes: 11

Scott Evernden
Scott Evernden

Reputation: 39986

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

Upvotes: 0

Brad
Brad

Reputation: 163593

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.

Upvotes: -1

Related Questions