javascript - 表上的双水平滚动 - JQuery
问题描述
我正在尝试添加双水平滚动 - 一个在桌子上方,一个在桌子下方。表格“必须基于百分比”而不是固定宽度。如何使用 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;
}
解决方案
再添加一个带有水平滚动的 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示例
推荐阅读
- pyspark - 将 pathlib.Path 与 spark.read.parquet 一起使用
- samsung-mobile - 三星没有坚持前台服务
- ios - 一种为 UILabel 实现类似 css 的自定义阴影的方法?
- powershell - Powershell命令Enable-ComputerRestore不接受变量
- python - aws cdk aws_iam.User with passwordResetRequired=True 如何初始化密码
- c# - RaycastHit 没有检测到任何东西
- python - AWS 上 TigerGraph 集群的 pyTigerGraph 连接器问题
- python - 对 Python Flask 应用程序的 PUT 请求中的 Json 无法解码
- webkit - 为什么我在使用 Weston/Wayland 时会出现“权限被拒绝”错误
- python - 计算连续天数的温度数据