我已经在一个较短的表中拆分了一个很长的表（滚动表），以使滚动条可以在表的底部逐渐增加。我有一些脚本，该脚本允许顶部的滚动条与下表下方的滚动条相匹配-但是有没有一种方法可以链接所有表，因此无论您使用哪种滚动条，它们都可以同时滚动？
因此，当前顶部滚动条和第一个底部滚动条将控制所有滚动条，但较低的滚动条则不...
$(function(){
'use strict';
$(".tableScrollTop").scroll(function(){
$(".tableWide-wrapper")
.scrollLeft($(".tableScrollTop").scrollLeft());
});
$(".tableWide-wrapper").scroll(function(){
$(".tableScrollTop")
.scrollLeft($(".tableWide-wrapper").scrollLeft());
});
});.tableWide-wrapper {
overflow-x: auto;
border-right: 2px solid #797979;
box-sizing: border-box;
width: 100%;
margin-bottom:20px;
}
.tableScrollTop {
overflow-x: scroll;
box-sizing: border-box;
margin: 0;
height:20px;
width: 100%;
}
.tableWide {
width: 1500px;
table-layout: fixed;
margin-top: 0 !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tableScrollTop"><div style="width:1500px; height:20px;"></div></div>
<div class="tableWide-wrapper" tabindex="0">
<table class="table-2 tableWide">
<tr>
<td>table copy</td>
<td>table copy</td>
<td>table copy</td>
<td>table copy</td>
</tr>
</table>
</div>
<div class="tableWide-wrapper" tabindex="0">
<table class="table-2 tableWide">
<tr>
<td>table copy</td>
<td>table copy</td>
<td>table copy</td>
<td>table copy</td>
</tr>
</table>
</div>
<div class="tableWide-wrapper" tabindex="0">
<table class="table-2 tableWide">
<tr>
<td>table copy</td>
<td>table copy</td>
<td>table copy</td>
<td>table copy</td>
</tr>
</table>
</div>您可以强制scrollLeft每个表的成为scrollLeft滚动的当前元素的的值：
$(function(){
'use strict';
$(".tableScrollTop,.tableWide-wrapper").scroll(function(){
$(".tableWide-wrapper,.tableScrollTop")
.scrollLeft($(this).scrollLeft());
});
});.tableWide-wrapper {
overflow-x: auto;
border-right: 2px solid #797979;
box-sizing: border-box;
width: 100%;
margin-bottom:20px;
}
.tableScrollTop {
overflow-x: scroll;
box-sizing: border-box;
margin: 0;
height:20px;
width: 100%;
}
.tableWide {
width: 1500px;
table-layout: fixed;
margin-top: 0 !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tableScrollTop"><div style="width:1500px; height:20px;"></div></div>
<div class="tableWide-wrapper" tabindex="0">
<table class="table-2 tableWide">
<tr>
<td>table copy</td>
<td>table copy</td>
<td>table copy</td>
<td>table copy</td>
</tr>
</table>
</div>
<div class="tableWide-wrapper" tabindex="0">
<table class="table-2 tableWide">
<tr>
<td>table copy</td>
<td>table copy</td>
<td>table copy</td>
<td>table copy</td>
</tr>
</table>
</div>
<div class="tableWide-wrapper" tabindex="0">
<table class="table-2 tableWide">
<tr>
<td>table copy</td>
<td>table copy</td>
<td>table copy</td>
<td>table copy</td>
</tr>
</table>
</div>这里是解释：
$(".tableScrollTop,.tableWide-wrapper").scroll-滚动任何属于tableScrollTopclass或tableWide-wrapperclass的元素后，请运行以下命令：
tableScrollTop类或tableWide-wrapper类的任何元素-$(".tableWide-wrapper,.tableScrollTop")scrollLeft值设置scrollLeft为刚刚滚动的当前元素的值：$(this).scrollLeft()本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句