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 |
