Zwei DIV Bereiche gleichzeitig (synchron) scrollen

Um zwei Bereiche (hier: DIV Elemente) gleichzeitig mit nur einem Scrollbalken zu verschieben, nutzen Sie folgenden Code:

<script type="text/javascript">
var Marker = [0,0];

function CS(div1, div2) {
  if (!div1 || !div2) return;
  var control = null;
  if (div1.scrollTop != Marker[0])
    control = div1;
  else
    if (div2.scrollTop != Marker[1])
      control = div2;

  if (control == null)
    return;
  else
    div1.scrollTop = div2.scrollTop = control.scrollTop;

  Marker[0] = div1.scrollTop;
  Marker[1] = div2.scrollTop;
}

window.setInterval("CS(document.getElementById('ta1'), document.getElementById('ta2'))", 100);
</script>

<table>
<tr><td><div style="height: 70px; width: 100px; overflow: auto" id="ta1">
        Testzeile 1<br>Testzeile 2<br>
        Testzeile 3<br>Testzeile 4<br>
        Testzeile 5<br>Testzeile 6<br>
        Testzeile 7<br>Testzeile 8<br></div></td>
        <td><div id="ta2" style="height: 70px; width: 200px; overflow: auto">
        Testzeile Rechts 1<br>Testzeile Rechts 2<br>
        Testzeile Rechts 3<br>Testzeile Rechts 4<br>
        Testzeile Rechts 5<br>Testzeile Rechts 6<br>
        Testzeile Rechts 7<br>Testzeile Rechts 8<br></div></td>
        </tr>
</table>
Folgendes Beispiel zeigt die Funktionsweise. Innerhalb des angezeigten (leeren) Bereiches ist das o.a. JavaScript für das Beispiel definiert:

Testzeile 1
Testzeile 2
Testzeile 3
Testzeile 4
Testzeile 5
Testzeile 6
Testzeile 7
Testzeile 8
Testzeile 1
Testzeile 2
Testzeile 3
Testzeile 4
Testzeile 5
Testzeile 6
Testzeile 7
Testzeile 8