syncing scrollbars using jQuery
Given the following code:
<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>
And the following 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 />
Why exactly does every browser but chrome call the scrolling function more than once? It's like the scrolling left happens after it's already back being bound by each element. It's pretty confusing.
I've tried creating custom events and triggering them sequentially and it doesn't seem to matter. I've been beating myself up over this for two days now, any ideas?
Chrome's output when scrolling the first scroll bar is scroll_table_1 while FF and IE is scroll_table_1, scroll_table_2, scroll_table_3, etc
Thanks patrick! That works great in everything but IE7 and FF on Windows. The scrollbar you're currently dragging has this weird back and forth effect in those browsers. And doing console logging instead of running that scroll bar function once (which was what I was trying to do with unbinding and binding) it runs over itself over and over. I think most of the newer browsers JS engines are better but apparently IE7 and FF choke.
加载中,请稍侯......
精彩评论