Question

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

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

谢谢

Answer 1

我找到了一种不使用iScroll实现此目的的方法5.将表包装在以下div中：<div style="overflow:auto; width: 100%; ">。这将启用滚动，但是切换列按钮会随表格一起滚动。有关完整的工作代码和js小提琴，请参阅此答案

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

iScroll5＆amp; Jquery移动表水平滚动

1 个答案: