Scroll 2 divs with one scrollbar

[rizlaa]

Hi,

I have two divs that I would like to scroll with one vertical scrollbar, but each should use their own horizontal scrollbar. Is this possible??

I have the following code in my page:

<table><tr><td>

<div style="HEIGHT: 70px; WIDTH: 100%; OVERFLOW: auto">
some text<br>some text<br>
some text<br>some text<br>
some text<br>some text<br>
some text<br>some text</div>
</td>
<td>
<div id="ta2" style="HEIGHT: 70px; WIDTH: 100%; OVERFLOW: auto">
some text<br>some text<br>
some text<br>some text<br>
some text<br>some text<br>
some text<br>some text</div>
</td>
</tr>
</table>

Regards,
Riz

[Twey]

On which DIV do you wish the scrollbar to appear?

[rizlaa]

The one on the right, although thinking about it, it would probably be better to have it on both and they both scroll up and down together.

[Twey]

How about this:

<script type="text/javascript">
var lastSeen = [0, 0];
function checkScroll(div1, div2) {
  if(!div1 || !div2) return;
  var control = null;
  if(div1.scrollTop != lastSeen[0]) control = div1;
  else if(div2.scrollTop != lastSeen[1]) control = div2;
  if(control == null) return;
  else div1.scrollTop = div2.scrollTop = control.scrollTop;
  lastSeen[0] = div1.scrollTop;
  lastSeen[1] = div2.scrollTop;
}

window.setInterval("checkScroll(document.getElementById('ta1'), document.getElementById('ta2'))", 200);
</script>
<table><tr><td>

<div style="height: 70px; width: 100%; overflow: auto" id="ta1">
some text<br>some text<br>
some text<br>some text<br>
some text<br>some text<br>
some text<br>some text</div>
</td>
<td>
<div id="ta2" style="height: 70px; width: 100%; overflow: auto">
some text<br>some text<br>
some text<br>some text<br>
some text<br>some text<br>
some text<br>some text</div>
</td>
</tr>
</table>

And yes, CSS is case-sensitive.

[rizlaa]

Thanks, that works - although there is a slight time lag between the two scrollers.

[rizlaa]

Changing

window.setInterval("checkScroll(document.getElementById('ta1'), document.getElementById('ta2'))", 200);

to

window.setInterval("checkScroll(document.getElementById('ta1'), document.getElementById('ta2'))", 1);

seems to fix the problem. Thanks again for the quick reply.

[Twey]

Yes, unfortunately there is no reliable scroll event. Therefore, we must poll them -- check for changes every so often. A lower delay there will make the script more responsive, but may have a negative effect on the performance of the page. Experiment on a couple of other machines.

[Bijavar]

For better berformance add onscroll event to first div and call checkScroll on the onscroll event