次のように複数の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のサファリブラウザなどでぶるぶるしてスクロール連動がうまくいかないバグが発生しました。
