iScroll5 & Jquery 移动表格水平滚动答案

【问题标题】：iScroll5 & Jquery mobile table horizontal scrollingiScroll5 & Jquery 移动表格水平滚动
【发布时间】：2014-04-03 16:10:32
【问题描述】：

我正在尝试使用 iScroll 5 http://iscrolljs.com/ 在 jquery 移动表上实现水平滚动，但它根本不起作用。垂直滚动有效，但它完全忽略了水平滚动。这是我的代码：

<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 -->

和 jquery：

<script >

  var myScroll;

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

  }

</script>

有人对这个有任何想法吗？如果我删除表格并放入一个列表，它会像我期望的那样水平滚动。这是jsfiddle http://jsfiddle.net/7uAhg/

谢谢

【问题讨论】：

标签： jquery jquery-mobile mobile iscroll

【解决方案1】：

我找到了一种无需使用 iScroll 5 即可实现此目的的方法。将表格包装在以下 div 中：<div style="overflow:auto; width: 100%; ">。这将启用滚动，但随后切换列按钮将与表格一起滚动。请参阅此答案以获取完整的工作代码和 js fiddle

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

【讨论】：