Zwei DIV Bereiche gleichzeitig (synchron) scrollen – Your Help Center
Copying sources and texts (also in parts) for publishing without our permission is NOT ALLOWED. We are fed up with finding our work on other sites (like stackoverflow).
Das Kopieren von Quellcode und Texten (auch in Auszügen) ist nicht erlaubt. Wir haben es gründlich satt, unsere Arbeit auf anderen Webseiten zu finden.

Copying for non-public usage is allowed.           Das private Kopieren und Benutzen ist natürlich erlaubt und erwünscht.
27. Aug 2009
Teaser

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

4 × zwei =