This question has been asked after a detailed discussion on this SO question
Problem:
I need a horizontal scroll which can be scrolled using mouse drag on desktops and swipe events on touch enabled screens
Possible Solution:
I tried using the jQuery dragscrollable which works fine on desktops but not on touch enabled devices
So then I went on to explore Touch Swipe Jquery Plugin and came up with a possible solution at JSFiddle Code and the result for the JSFiddle can be found here
You can also find a working demo at here
My java script code is as follows
//to detect if device has touch enabled
var is_touch_device = 'ontouchstart' in document.documentElement;
$(function()
{
$('.myClass').dragscrollable();
//if touch is enabled then we have to map the swipe event
if(is_touch_device)
$('.panel_list').swipe( { swipeStatus:scroll_panel_list, allowPageScroll:'horizontal' } );
function scroll_panel_list(event, phase, direction, distance)
{
var pos = $('.myClass').scrollLeft();
if(direction == 'left')
{
$('.myClass').animate({scrollLeft: pos + 200} );
}
if(direction == 'right')
{
$('.myClass').animate({scrollLeft: pos - 200} );
}
}
});
I have tested it works fine on Android browser but not very reponsive on iPhone.
Can someone help me come up with a better solution ? I am using twitter bootstrap
EDIT:1
Well now I guess I might have hit upon a nice plugin in that seems to work fine on desktops and touch enabled devices, the plugin is called jquery.dragscroll, I have an updated demo here
EDIT:2
There seems to be another plugin that has support for touch-enabled devices, it is called Overscroll. I haven't evaluated it as yet
Additionally, there is the "Swipeview" script http://cubiq.org/swipeview