I'm trying to synchronize the scrolling of two <div> elements. The
top element is for showing column headers, the bottom div shows the
table rows.
I consed up the following HTML/JavaScript concoction which does
something useful in IE and also in Mozilla 1.4.
However, the problem is that it only works in Mozilla if I say
overflow:auto in the top frame, it ceases working if I say
overflow:hidden. But saying overflow:hidden is desirable because it
eliminates a superfluous scrollbar. overflow:hidden works in IE.
Any suggestions on getting rid of the scrollbars in Mozilla, too?
tia,
Kai
<html>
<head>
<title>Testing div scrolling</title>
<script language="JavaScript">
<!-- // Begins
var topdiv;
var bottomdiv;
IE = (document.all) ? true : false;
last_x = 0;
last_y = 0;
function synchronizeScroll() {
if (bottomdiv.scrollLeft) {
topdiv.scrollLeft = bottomdiv.scrollLeft;
}
}
// Ends -->
</script>
</head>
<body onScroll="synchronizeScroll()"
onLoad="if (!IE) window.setInterval('synchronizeScroll()',
100);">
<div id="topdiv" style="width:200px;overflow:auto">
<pre>123456789|123456789|123456789|123456789|12345 6789|123456789|123456789|</pre></div>
<hr>
<div onScroll="synchronizeScroll()"
id="bottomdiv" style="width:200px;height:100px;overflow:scroll">
<pre>
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx yzabcdefghijklmnopqrstuvwxyz
</pre>
</div>
<script language="JavaScript">
topdiv = document.getElementById('topdiv');
bottomdiv = document.getElementById('bottomdiv');
</script>
</body>
</html>
