Faire défiler deux champs, tel qu'un textarea, simultanément est tout a fait possible et très simple avec jQuery

Source

Soit le code HTML suivant

<textarea id="textA">Abc</textarea>
<textarea id="textB" style="overflow: hidden;">Abc</textarea>

Le deuxième possède l'attribut overflow à hidden afin de masquer sa barre de défilement vertical.

Seul le premier champ possédera donc une barre de scroll, permettant de faire défiler les deux champs simultanément.

Script

Ensuite, il n'y a plus qu'à déclencher une fonction qui alignera le deuxième champ avec le premier au défilement de ce dernier:

$(function(){
	$("#textA").scroll(function(){
		$('#textB').scrollTop($(this).scrollTop());
	});
});

Démonstration


Warning: Parameter 2 to modChrome_artblock() expected to be a reference, value given in /var/www/bidoum.fr/templates/bleu/html/modules.php on line 39

Warning: Parameter 3 to modChrome_artblock() expected to be a reference, value given in /var/www/bidoum.fr/templates/bleu/html/modules.php on line 39