title: jquery draggable x axis disable page scroll on mobile
body: <p>I am making a slider that have 3 images and they are draggable with limits , I am using UI touch punch to make the mobile drag work. </p>
  
  <p>This is my js code so far : </p>
  
  <pre><code>$(".draggable").draggable({
  axis: "x",
  drag: function(event, ui) {
  
      //$(window).scrollTo(0, scrollPage);
      //window.scrollBy(0,scrollPage);
      if (ui.position.left &gt; 0) {
          newLeft = 0;
      } else if (ui.position.left &lt; max_drag) {
          newLeft = max_drag;
      } else {
          newLeft = ui.position.left;
      }
      ui.position.left = newLeft;
  }
  });
  </code></pre>
  
  <p>and this is what i want to achieve :
  <a href="https://i.stack.imgur.com/7uFof.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7uFof.jpg" alt="enter image description here"></a>
  now everything works except on mobile when i scroll vertically over the draggable element it doesn't scroll even tho the draggable is only on x axis.</p>
  
  <p>I have searched and fuond this : 
  <a href="https://stackoverflow.com/questions/28377138/jquery-ui-draggable-prevents-scrolling-on-mobile">jQuery UI draggable prevents scrolling on mobile</a>
  And 
  <a href="https://stackoverflow.com/questions/21461428/jquery-ui-draggable-and-page-scrolling-on-mobile">jQuery UI Draggable and Page Scrolling (on mobile)</a> 
  but I couldnt get a clear solution or answer.</p>