I needed to catch left swipe and have it force the page to scroll down in the browser on an Android device. Regular scrolling (up and down) needed to continue to work as expected. I’ve come up with the following working solution. I’m posting it here in the hopes it will be of use to someone else.
The following has been tested on a Samsung Galaxy Tab in chrome 40.0.2214.109
Requirements: JQuery and TouchSwipe
JavaScript
[code language=”javascript”]
// Make left swipe cause horisontal scrolling on page
$(function() {
// event.pageY is not available (set to 0) on Samsung Galaxy Tab with android chrome 40.0.2214.109
// as work around use global variable viewPageY and set when basic jquery tocuh events are triggered
var viewPageY = 0;
if(navigator.userAgent.toLowerCase().indexOf("android") > -1){
$(‘html’).on("touchstart touchmove touchend", function(e){
viewPageY = e.originalEvent.changedTouches[0].pageY;
});
}else{
$(‘html’).mousemove(function(e){
viewPageY = e.pageY;
});
}
// Use touchswipe plugin to register a left swipe event and trigger a downwards scroll
$(".panels").swipe( {swipeLeft:swipeLeft,
allowPageScroll:’vertical’} );
function swipeLeft(event, direction, distance, duration, fingerCount) {
var newPosition = viewPageY + distance;
$(‘html, body’).animate({ scrollTop: newPosition });
}
});
[/code]
HTML
[code language=”html”]
<div class=’panels’>
… content for the page
</div>
[/code]
Video of code in use on Samsung Galaxy Tab
If there is an easier way to do this (without jQuery Mobile) then please let me know in the comments.