Two-fingered scroll js on touchpad - javascript

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?

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.

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

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.

Related

Calculate mouse wheel scroll speed using JavaScript

I need some help computing and calculating mouse wheel scrolling speed.
I want to determine when the user is scrolling using their mousewheel and how fast or slow they scrolling.
Based on speed I want to do some operations.
How can I find mousewheel scrolling speed?
I've looked into this before, and there are three issues here.
Mouse wheel speed varies in how it is reported by the browser.
User preferences determine what impact each 'click' of a scroll has on a site.
There are some mouses that don't 'click' and instead spin freely, which gives weird numbers.
The combination of these three make this a rather useless metric to do anything useful with. One person could scroll 5 times and be at the bottom of your site, while another 30 times and only advanced one paragraph.
In my case, I use deltaY as a value. deltaY could be negative(scroll top) or positive(scroll down).
Convert the value to only positive number using Math.abs(event.deltaY) and you can use that as a speed.

Detecting the end (drop) of a Scrollbar Event

I need to detect when a user has stopped scrolling only in the Scrollbar.
There is this site: http://beoplay.com/Products/BeoplayA9, that is already doing what I need.
I need to readjust page position if user has scrolled (with the scroll bar) and left the scroll between two pages. Notice that in the example website the page position is only readjusted at the 'drop' of the scroll bar.
This question has been asked many times, but not this way, I've already seen this plugin by James Padolsey, but it doesn't work as the example website.
I have some code already in a jsfiddle: http://jsfiddle.net/promatik/7rkGV/
The handling of the mouse wheel is done, but now I can't figure out how to handle the scroll bar move to know when it was dropped.
Maybe there is a away to differentiate the event from a wheel scroll and a scroll bar scroll.
$(window).on('scroll', function (event) {
console.log(event);
});
Does anyone know how to replicate the effect in the example?

For mobile webkit, how can I make the horizontal menu bar scrollable when you touch/drag it?

Let's say I'm on the standard iPhone 4.
My menu bar is 2000px in width. When the user touches and holds on the menu div, he can move his finger left/right, and the menu bar will move. This allows the user to browse all of the menu's items using his finger. (Scrolling left/right)
How can I make that in javascript/jquery?
It's like the Google Images webview (go there on your phone). You're able to swipe left and right to navigate each image.
Except...I want it to be a menu bar, with no "snapping".
Here's a very very basic example. It should get you moving in the right direction though.
$('body').bind({
'touchmove': function(e){
$('.menu_bar').css({
'left': e.originalEvent.touches[0].pageX
});
}
});
To get where you're headed you'll need to also store the touchstart coordinates, the .menu_bar start position and then use a bit of math to move the bar relative to it's position rather than just snapping to the finger position each time like the example above will do.
Hope that helps :)
I'm still a little confused by the question but I believe the answer is just to use
-webkit-overflow-scrolling: touch;
This will work for iOS5 devices and give you a small scroll bar when active (i.e. when scrolling)
Otherwise you could try this plugin: http://cubiq.org/iscroll-4
Or: http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/
(which is multi-device)

jQuery & Touch/Mobile: Perform Function on Swipe Left / Right

How can I achieve to let jQuery/JavaScript perform a jQuery-Function if a mobile-user swipes with one finger to the left an another function if he swipes to the right?
I like to animate scrollLeft and scrollRight to a certain position if the user swipes left/right. I'm doing the same for desktop with keyboard-navigation trough Arrow Left/Right which works perfectly. Now I need the same for swiping on touch devices.
(if possible without jQuery Mobile or another additional library)
ok heres a long answer but it worth it:
jQuery (Swipe vs. Touch) pageX and pageY keep returning 0
Hope it helps
Using some of the following events you can work out which direction a swipe has been made
touchstart: Occurs when a finger is placed on the screen
touchend: Occurs when a finger is removed from the screen
touchmove: Occurs when a finger already placed on the screen is moved across the screen
touchcancel: Occurs when a touch is cancelled before the finger is actually removed from the screen
Record the x,y position on touchstart and again on touchend and determine which direction a swipe has been made

Bubbling scroll/mousewheel event

I've setup my app/website such that I have an absolute-positioned canvas element on top of a scrollpanel, when the scrollpanel scrolls I apply on offset to the canvas to make it look like the image is scrolling (this allows me to have huge canvas without the overhead of a huge canvas element). The problem is, when my mouse is over the canvas element, the scroll wheel does not work, since the scroll event does not bubble. In this case, however, I need the bubbling to get the scrollbar to work.
I'm using GWT for this, so I'd prefer not to rely on a jQuery solution (although a pure javascript solution would be ok) since it's kinda hard to mix the two. I can capture the mousewheel event, but the main problem with that is that it doesn't seem to differentiate between scrolling (up/down) and tilting of the wheel (left/right). I tried eventGetShiftKey(), eventGetButton(), eventGetType(), and some others but all those methods return the same exact result for scrolling and tilting (tilt left = scroll up, tilt right = scroll down).
It seems like the best way to handle this is to bubble the actual event to the scrollpanel (which by the way also contains the parent div that contains the absolute-positioned canvas), but I'm not sure if that's possible?
Mousewheel event does bubble, to differentiate between up/down scrolling use the event.wheelDelta and event.detail attributes.
MSDN: onmousewheel Event (IE, WebKit)
event.wheelDelta indicates the distance that the wheel button has rotated, expressed in multiples of 120. A positive value indicates that the wheel button has rotated away from the user. A negative value indicates that the wheel button has rotated toward the user.
MDC: DOMMouseScroll (Gecko)
event.detail specifies the number of "ticks" that the mouse wheel moved. Positive values mean down/right", negative up/left.
event.axis specifies the axis of the scroll gesture (horizontal or vertical). This attribute was added in Firefox 3.5
Also see this article which talks a bit about normalizing.

Categories