title: iScroll5 & Jquery mobile table horizontal scrolling
body: <p>I'm trying to implement a horizontal scroll on a jquery mobile table using iScroll 5 <a href="http://iscrolljs.com/" rel="nofollow">http://iscrolljs.com/</a> however it's not working at all. The vertical scoll works but it totally ignores the horizontal scroll. Here's my code:</p>
  
  <pre><code>&lt;body onload="loaded()"&gt;
  
    &lt;div data-role="page" id="scroll" data-theme="a"&gt;
      &lt;div data-role="content"&gt;
  
      &lt;div id="wrapper"&gt;
  
          &lt;table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke"&gt;
               &lt;thead&gt;
                 &lt;tr&gt;
                   &lt;th data-priority="1"&gt;Rank&lt;/th&gt;
                   &lt;th data-priority="1"&gt;Movie Title &lt;/th&gt;
                   &lt;th data-priority="1"&gt;Year&lt;/th&gt;
                   &lt;th data-priority="1"&gt;&lt;abbr title="Rotten Tomato Rating"&gt;Rating&lt;/abbr&gt;&lt;/th&gt;
                   &lt;th data-priority="1"&gt;Reviews&lt;/th&gt;
                   &lt;th data-priority="1"&gt;Rank&lt;/th&gt;
                   &lt;th data-priority="1"&gt;Movie Title &lt;/th&gt;
                   &lt;th data-priority="1"&gt;Year&lt;/th&gt;
                   &lt;th data-priority="1"&gt;&lt;abbr title="Rotten Tomato Rating"&gt;Rating&lt;/abbr&gt;&lt;/th&gt;
                   &lt;th data-priority="1"&gt;Reviews&lt;/th&gt;
                 &lt;/tr&gt;
               &lt;/thead&gt;
               &lt;tbody&gt;
                 &lt;tr&gt;
                   &lt;th&gt;1&lt;/th&gt;
                   &lt;td&gt;&lt;a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external"&gt;Citizen Kane&lt;/a&gt;&lt;/td&gt;
                   &lt;td&gt;1941&lt;/td&gt;
                   &lt;td&gt;100%&lt;/td&gt;
                   &lt;td&gt;74&lt;/td&gt;
                   &lt;th&gt;1&lt;/th&gt;
                   &lt;td&gt;&lt;a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external"&gt;Citizen Kane&lt;/a&gt;&lt;/td&gt;
                   &lt;td&gt;1941&lt;/td&gt;
                   &lt;td&gt;100%&lt;/td&gt;
                   &lt;td&gt;74&lt;/td&gt;
                 &lt;/tr&gt;
                 &lt;tr&gt;
                   &lt;th&gt;2&lt;/th&gt;
                   &lt;td&gt;&lt;a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external"&gt;Casablanca&lt;/a&gt;&lt;/td&gt;
                   &lt;td&gt;1942&lt;/td&gt;
                   &lt;td&gt;97%&lt;/td&gt;
                   &lt;td&gt;64&lt;/td&gt;
                   &lt;th&gt;1&lt;/th&gt;
                   &lt;td&gt;&lt;a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external"&gt;Citizen Kane&lt;/a&gt;&lt;/td&gt;
                   &lt;td&gt;1941&lt;/td&gt;
                   &lt;td&gt;100%&lt;/td&gt;
                   &lt;td&gt;74&lt;/td&gt;
                 &lt;/tr&gt;
  
               &lt;/tbody&gt;
             &lt;/table&gt;
  
      &lt;/div&gt; &lt;!-- end wrapper --&gt;
  
  &lt;/div&gt;&lt;!-- /content --&gt;
  </code></pre>
  
  <p>and the jquery:</p>
  
  <pre><code>&lt;script &gt;
  
    var myScroll;
  
    function loaded () {
     myScroll = new IScroll('#wrapper', {
      eventPassthrough: true, 
      scrollX: true, 
      scrollY: false, 
      mouseWheel: true, 
      preventDefault: false
      });
  
    }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Does anyone have any idea's on this one? If I remove the table and put in a list it scrolls horizontally as I would expect. Here is the jsfiddle <a href="http://jsfiddle.net/7uAhg/" rel="nofollow">http://jsfiddle.net/7uAhg/</a></p>
  
  <p>Thanks </p>