JQuery Draggable with Touch Punch stops vertical scroll
<p>I am using JQuery Draggable function and Touch Punch to produce a list of horizontal sliders that can be scrolled by clicking and dragging. It works great in touch and click devices. The problem I am facing is that if I try to scroll up or down in touch devices, it doesn't work.</p>

<p>I have looked through SO and found that removing "event.preventDefault" from TouchPunch allows vertical scrolling, the problem with this fix is, that it only works on some devices, and not all.</p>

<p>I am wondering if anyone has any other solutions, or alternative way of producing the same horizontal sliders that work on both touch and click events.</p>

<p>Here is Example code (JQuery Draggable):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
  var slides = $('#list1 ul').children().length;
  var slideWidth = $('#list1').width();
  var min = 0;
  var max = -((slides - 1) * slideWidth);

  $("#list1 ul").width(slides * slideWidth).draggable({
    axis: 'x',
    drag: function(event, ui) {
      if (ui.position.left &gt; min) ui.position.left = min;
      if (ui.position.left &lt; max) ui.position.left = max;
    }
  });

    $("#list2 ul").width(slides * slideWidth).draggable({
    axis: 'x',
    drag: function(event, ui) {
      if (ui.position.left &gt; min) ui.position.left = min;
      if (ui.position.left &lt; max) ui.position.left = max;
    }
  });


});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#list1 {
  position: relative;
  height: 16em;
  width: 100%;
  text-align: middle;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
}

#list1 .floating-box {
  margin: auto;
  display: inline-block;
  width: 15em;
  height: 13.5em;
  margin: 0.1em;
  border: 0.2em solid black;
  background-color: white;
}

#list2 {
  position: relative;
  height: 16em;
  width: 100%;
  text-align: middle;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
}

#lis2 .floating-box {
  margin: auto;
  display: inline-block;
  width: 15em;
  height: 13.5em;
  margin: 0.1em;
  border: 0.2em solid black;
  background-color: white;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="list1"&gt;
    &lt;ul&gt;
    &lt;p&gt;One&lt;/p&gt;
    &lt;div class="floating-box"&gt;Floating box&lt;/div&gt;
    &lt;div class="floating-box"&gt;Floating box&lt;/div&gt;
    &lt;div class="floating-box"&gt;Floating box&lt;/div&gt;
    &lt;/ul&gt;
 &lt;/div&gt;


  &lt;div id="list2"&gt;
    &lt;ul&gt;
     &lt;p&gt;Two&lt;/p&gt;
     &lt;div class="floating-box"&gt;Floating box&lt;/div&gt;
     &lt;div class="floating-box"&gt;Floating box&lt;/div&gt;
     &lt;div class="floating-box"&gt;Floating box&lt;/div&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>If I touch list1 or list2 div and try to scroll up or down, it doesn't recognize the movement. Any help or direction would be appreciated.</p>