iScroll5 & Jquery mobile table horizontal scrolling

Question

I'm trying to implement a horizontal scroll on a jquery mobile table using iScroll 5 http://iscrolljs.com/ however it's not working at all. The vertical scoll works but it totally ignores the horizontal scroll. Here's my code:

<body onload="loaded()">

  <div data-role="page" id="scroll" data-theme="a">
    <div data-role="content">

    <div id="wrapper">

        <table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
             <thead>
               <tr>
                 <th data-priority="1">Rank</th>
                 <th data-priority="1">Movie Title </th>
                 <th data-priority="1">Year</th>
                 <th data-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
                 <th data-priority="1">Reviews</th>
                 <th data-priority="1">Rank</th>
                 <th data-priority="1">Movie Title </th>
                 <th data-priority="1">Year</th>
                 <th data-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
                 <th data-priority="1">Reviews</th>
               </tr>
             </thead>
             <tbody>
               <tr>
                 <th>1</th>
                 <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
                 <td>1941</td>
                 <td>100%</td>
                 <td>74</td>
                 <th>1</th>
                 <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
                 <td>1941</td>
                 <td>100%</td>
                 <td>74</td>
               </tr>
               <tr>
                 <th>2</th>
                 <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
                 <td>1942</td>
                 <td>97%</td>
                 <td>64</td>
                 <th>1</th>
                 <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
                 <td>1941</td>
                 <td>100%</td>
                 <td>74</td>
               </tr>

             </tbody>
           </table>

    </div> <!-- end wrapper -->

</div><!-- /content -->

and the jquery:

<script >

  var myScroll;

  function loaded () {
   myScroll = new IScroll('#wrapper', {
    eventPassthrough: true, 
    scrollX: true, 
    scrollY: false, 
    mouseWheel: true, 
    preventDefault: false
    });

  }

</script>

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 http://jsfiddle.net/7uAhg/

Thanks

score 0 · Answer 1 · edited May 23 '17 at 11:50

0

I have found a way of achieving this without using iScroll 5. Wrap the table in the following div: <div style="overflow:auto; width: 100%; ">. This will enable scrolling but then the toggle column button scrolls along with the table. See this answer for the full working code and js fiddle

jquery mobile issue with data-column-btn positioning when allowing horizontal scrolling

edited May 23 '17 at 11:50

Community

1
1

answered May 01 '14 at 09:21

Janey

1,260
3
17
39

iScroll5 & Jquery mobile table horizontal scrolling

1 Answers1