title: Mobile / Touch Enabled Screens - horizontal scroll on swipe
body: <p>This question has been asked after a detailed discussion on <a href="https://stackoverflow.com/q/11649405/226906">this SO question</a></p>
  
  <p>Problem:</p>
  
  <p>I need a horizontal scroll which can be scrolled using mouse drag on desktops and swipe events on touch enabled screens</p>
  
  <p>Possible Solution:</p>
  
  <p>I tried using the jQuery dragscrollable which works fine on desktops but not on touch enabled devices</p>
  
  <p>So then I went on to explore <a href="https://github.com/mattbryson/TouchSwipe-Jquery-Plugin" rel="nofollow noreferrer">Touch Swipe Jquery Plugin</a> and came up with a possible solution at <a href="http://jsfiddle.net/celestialcitizen/BR4Av/" rel="nofollow noreferrer">JSFiddle Code</a> and the result for the JSFiddle can be found <a href="http://jsfiddle.net/celestialcitizen/BR4Av/embedded/result/" rel="nofollow noreferrer">here</a></p>
  
  <p>You can also find a working demo at <a href="http://touchswipedemo.celestialcitizen.jit.su/" rel="nofollow noreferrer">here</a></p>
  
  <p>My java script code is as follows</p>
  
  <pre><code>//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} );
                      }
                  }    
              });​
  </code></pre>
  
  <p>I have tested it works fine on Android browser but not very reponsive on iPhone.</p>
  
  <p>Can someone help me come up with a better solution ? I am using twitter bootstrap</p>
  
  <p>EDIT:1</p>
  
  <p>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 <a href="https://github.com/iwyg/jquery.dragscroll" rel="nofollow noreferrer">jquery.dragscroll</a>, I have an updated demo <a href="http://touchswipedemo.celestialcitizen.jit.su/" rel="nofollow noreferrer">here</a></p>
  
  <p>EDIT:2</p>
  
  <p>There seems to be another plugin that has support for touch-enabled devices, it is called <a href="https://github.com/azoff/Overscroll" rel="nofollow noreferrer">Overscroll</a>. I haven't evaluated it as yet</p>