次のように複数のtextareaがあるとします。
これを次のようにします。classはlinkageと共通のものをいれておきます。
<textarea id="area1" class="linkage" onscroll="scrLinkage('area1')"> テスト てすと test... </textarea> <textarea id="area2" class="linkage" onscroll="scrLinkage('area2')"> テスト てすと test... </textarea> <textarea id="area3" class="linkage" onscroll="scrLinkage('area3')"> テスト てすと test... </textarea>
onscroll=”scrLinkage()”でどれかスクロールした場合に連動を実行します。
<script> var j = jQuery.noConflict(); // スクロール連動 function scrLinkage(ids){ st = j('#'+ids).scrollTop(); j('.linkage').scrollTop(st); } </script>
j(‘#’+ids).scrollTop()で動かした要素のスクロール位置を取得し、それを.linkageに反映しています。
他にも連動させる方法があったのですが、その方法ですとMacのサファリブラウザなどでぶるぶるしてスクロール連動がうまくいかないバグが発生しました。