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>Testin g div scrolling</title>
<script language="JavaS cript">
<!-- // Begins
var topdiv;
var bottomdiv;
IE = (document.all) ? true : false;
last_x = 0;
last_y = 0;
function synchronizeScro ll() {
if (bottomdiv.scro llLeft) {
topdiv.scrollLe ft = bottomdiv.scrol lLeft;
}
}
// Ends -->
</script>
</head>
<body onScroll="synch ronizeScroll()"
onLoad="if (!IE) window.setInter val('synchroniz eScroll()',
100);">
<div id="topdiv" style="width:20 0px;overflow:au to">
<pre>123456789| 123456789|12345 6789|123456789| 123456789|12345 6789|123456789| </pre></div>
<hr>
<div onScroll="synch ronizeScroll()"
id="bottomdiv" style="width:20 0px;height:100p x;overflow:scro ll">
<pre>
abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
abcdefghijklmno pqrstuvwxyzabcd efghijklmnopqrs tuvwxyzabcdefgh ijklmnopqrstuvw xyz
</pre>
</div>
<script language="JavaS cript">
topdiv = document.getEle mentById('topdi v');
bottomdiv = document.getEle mentById('botto mdiv');
</script>
</body>
</html>
