title: iScroll with native scrolling on one axis
body: <p>I am using the most wonderful javascript tool iScroll4 <a href="http://cubiq.org/iscroll-4" rel="nofollow noreferrer">http://cubiq.org/iscroll-4</a> on a mobile website for iOS and Android. Here is what my layout looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/fA1fi.jpg" alt="layout problem"></p>
  
  <p>The horizontally scroll-able area is making use of iScroll4 with the following settings:</p>
  
  <pre><code>   var myScroll = new iScroll('frame',  { hScrollbar: false, vScrollbar: false, vScroll: false })
  </code></pre>
  
  <p>The horizontal scrolling part works great. This issue is what happens when a user attempts to scroll up or down the page placing their finger on the horizontal scrolling area. So I need native vertical scrolling, and iScroll horizontal scrolling on the same area.</p>
  
  <p>What I have tried so far:
  Removing e.preventDefault() in the iScroll code (allows for native scrolling, but in BOTH axes). 
  Removing e.preventDefault() and then disabling horizontal scrolling page wide with this:</p>
  
  <pre><code>var touchMove;
  
  document.ontouchstart = function(e){
      touchMove = e.touches[0];
  }
  
  document.ontouchmove = function(e){
      var theTouch = e.touches[0] || e.changedTouches[0];
      var Xer      = rs(touchMove.pageX - theTouch.pageX).toPos();
      var Yer      = rs(touchMove.pageY - theTouch.pageY).toPos();        
      touchMove    = theTouch;
      if(Yer &gt; Xer){ e.preventDefault(); }
  }
  </code></pre>
  
  <p>which seems to do nothing. How can I allow for native vertical scrolling in the horizontal scrolling area, without loosing the horizontal scrolling of iScroll? I am really stumped here. Thanks in advance.</p>
  
  <p>(just for the record rs(foo).toPos() is a function that makes foo a positive number regardless of its value).</p>