Blupixel IT Blog – Articoli e Tutorial Informatica e Programmazione

Blog ufficiale di Blupixel IT Srl

Sincronizzare lo scroll di due div con Javascript

Supponiamo di avere due diverse aree di testo come possono essere due div affiancati:

 <div id=”first_file” style=”float:left; height: 400px; width: 400px; overflow:scroll; white-space:nowrap; padding: 10px;”>
TESTO 1 ..
</div>
<div id=”second_file” style=”float:left; height: 400px; width: 400px; overflow-x:scroll; overflow-y:hidden; white-space:nowrap; padding: 10px; margin-left: 10px;”>
TESTO 2
</div>

Che sarebbero più o meno così:

Testo 1..

..1 – 1..

..2 – 1..

..3 – 1..

..4 – 1..

..5 – 1 ..

..6 – 1 ..

..7 – 1 ..

..8 – 1 ..

..9 – 1 ..

..10 – 1 ..

..11 – 1 ..

.. fine 1 ..

Testo 2..

..1 – 2..

..2 – 2..

..3 – 2..

..4 – 2..

..5 – 2 ..

..6 – 2 ..

..7 – 2 ..

..8 – 2 ..

..9 – 2 ..

..10 – 2 ..

..11 – 2 ..

.. fine 2 ..

Visualizziamo dei due scroll delle aree di testo, solo il primo, che risulterà, così, centrale tra i due.

Adesso aggiungiamo sotto uno script:

<script type=”text/javascript”>
setInterval(function(){
var actual_pos = document.getElementById('first_file').scrollTop;
document.getElementById('second_file').scrollTop = actual_pos;
}, 100);
</script>

Questo script provvede ogni 100 millisecondi ad aggiornare lo scroll del secondo riquadro in base alla posizione del primo.

Your email address will not be published. Required fields are marked *

*

Iq3aM

Please type the text above: