jQueryで複数要素(textareaなど)のスクロールを連動(同期)させる

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

シェアする

  • このエントリーをはてなブックマークに追加

フォローする