给出以下代码：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.scroll').bind('scroll', scrollBarSync);
});
function scrollBarSync(event) {
console.log($(event.target).attr('id'));
$('.scroll').unbind('scroll');
$.each($('.scroll'), function(index, value) {
var left = $(value).scrollLeft();
if ($(event.target).attr('id') != $(value).attr('id') &&
left != $(event.target).scrollLeft()) {
$(value).scrollLeft($(event.target).scrollLeft())
}
});
$('.scroll').bind('scroll', scrollBarSync);
return false;
}
</script>
以下html：
<style>
.hidden {
display:none;
}
.scroll {
overflow: scroll;
width:200px;
}
td {
width:45px !important;
height:47px;
}
table {
width:100% !important;
}
</style>
<div id="scroll_table_1" class="scroll">
<table>
<thead>
<tr>
<th>text</th>
<th>text</th>
<th>text</th>
<th>text</th>
<th class="hidden">text</th>
<th class="hidden">text</th>
<th class="hidden">text</th>
<th>text</th>
<th>text</th>
<th>text</th>
<th class="hidden">text</th>
<th>text</th>
<th class="hidden">text</th>
<th>text</th>
<th>text</th>
<th>text</th>
<th>text</th>
<th class="hidden">text</th>
<th>text</th>
<th>text</th>
<th>text</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</tbody>
</table>
</div>
<br />
<div id="scroll_table_2" class="scroll">
<table>
<thead>
<tr>
<th>text</th>
<th>text</th>
<th>text</th>
<th>text</th>
<th class="hidden">text</th>
<th class="hidden">text</th>
<th class="hidden">text</th>
<th>text</th>
<th>text</th>
<th>text</th>
<th class="hidden">text</th>
<th>text</th>
<th class="hidden">text</th>
<th>text</th>
<th>text</th>
<th>text</th>
<th>text</th>
<th class="hidden">text</th>
<th>text</th>
<th>text</th>
<th>text</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</tbody>
</table>
</div>
<br />
<div id="scroll_table_3" class="scroll">
<table>
<thead>
<tr>
<th>text</th>
<th>text</th>
<th>text</th>
<th>text</th>
<th class="hidden">text</th>
<th class="hidden">text</th>
<th class="hidden">text</th>
<th>text</th>
<th>text</th>
<th>text</th>
<th class="hidden">text</th>
<th>text</th>
<th class="hidden">text</th>
<th>text</th>
<th>text</th>
<th>text</th>
<th>text</th>
<th class="hidden">text</th>
<th>text</th>
<th>text</th>
<th>text</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td class="hidden">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</tbody>
</table>
</div>
<br />
为什么每个浏览器确实会多次调用滚动功能？这就像在它已经被每个元素束缚之后发生左滚动。这很令人困惑。
我尝试过创建自定义事件并按顺序触发它们似乎并不重要。现在，我已经在这两天殴打自己，有什么想法吗？
滚动第一个滚动条时Chrome的输出是scroll_table_1，而FF和IE是scroll_table_1，scroll_table_2，scroll_table_3等
答案 0 :(得分：0)
谢谢帕特里克！除了Windows上的IE7和FF之外，其他功能都很棒。您当前拖动的滚动条在这些浏览器中具有这种奇怪的来回效果。并且执行控制台日志记录而不是运行该滚动条功能一次（这是我尝试使用解除绑定和绑定），它一遍又一遍地运行。我认为大多数新的浏览器JS引擎都比较好，但显然IE7和FF扼流圈。