Question

我正在尝试添加双水平卷轴 - 一个位于桌面上方，另一个位于桌面下方。表格＃34;必须基于百分比＆＃34;而不是固定的宽度。我如何使用JQuery实现这一目标？

我需要表格跨越100％宽度并且有2个同步的滚动条。由于内容很多，底部滚动条会从用户那里丢失......

JSFIDDLE - https://jsfiddle.net/rbla/8usk97ch/6/

HTML

 <div style="overflow-x:auto;">

 <table id="select" class="info">
   <thead>
     <tr class="row">
       <th>1</th>
       <th>2</th>
       <th>3</th>
       <th>4</th>
       <th>5</th>

       <th>6</th>
       <th>7</th>
       <th>8</th>
       <th>9</th>
       <th>10</th>

       <th>11</th>
       <th>12</th>
       <th>13</th>
       <th>14</th>
       <th>15</th>

       <th>16</th>
       <th>17</th>
       <th>18</th>
       <th>19</th>
       <th>20</th>
     </tr>
   </thead>

   <tbody>
       <td>content 1</td>
       <td>content 2</td>
       <td>content 3</td>
       <td>content 4</td>
       <td>content 5</td>

       <td>content 6</td>
       <td>content 7</td>
       <td>content 8</td>
       <td>content 9</td>
       <td>content 10</td>

       <td>content 11</td>
       <td>content 12</td>
       <td>content 12</td>
       <td>content 14</td>
       <td>content 15</td>

       <td>content 16</td>
       <td>content 17</td>
       <td>content 18</td>
       <td>content 19</td>
       <td>content 20</td>
    </tbody>
   </table>

   </div>

CSS

  table.info {
     width: 98%;
     margin: 0 1%;
     border-collapse: collapse;
   }

 .row {
     background:#CCC;
  }

 td {
     white-space: nowrap;
 }

Answer 1

再添加一个带水平滚动的div：

<div id="scroll1" style="overflow-x:auto;">
    <div style="height: 1px;margin: 0 1%;"></div>
</div>

然后通过jQuery同步两个滚动事件。

$("document").ready(function(){
    $("#scroll1 div").width($("#select").width());
    $("#scroll1").on("scroll", function(){
        $("#scroll2").scrollLeft($(this).scrollLeft());
    });
    $("#scroll2").on("scroll", function(){
        $("#scroll1").scrollLeft($(this).scrollLeft());
    });
});

这是我的jsFiddle示例

表上的双水平滚动 - JQuery

1 个答案: