Mobile / Touch Enabled Screens - horizontal scroll on swipe

Anand Sunderraman picture Anand Sunderraman · Aug 8, 2012 · Viewed 18.2k times · Source

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

Answer

Playforward picture Playforward · Jan 22, 2013

Additionally, there is the "Swipeview" script http://cubiq.org/swipeview