CSSのiframeを二つ並べて、スクロールを連動させる

CSSで擬似iframeを作成するには

とかやってやると


こんな感じになる。

aaa

これを左寄せで二つ並べるには


でこんな風に。

aaa

bbb

僕が使う都合上、左はoverflow:hiddenにして、右のフレームにしかスクロールバーが出ないようにしている。



右のスクロールバーを動かすと両方のフレームが連動してスクロールされるようにするにはjQueryを使ってこう書く。


#migiでscrollイベントが起こったら、#hidariのscrollTopを#migiのscrollTopと同じところまでスクロールする。

ってことをしている。
上のサンプルもちゃんと連動してスクロールされるはず。

MacのSafari, Firefox, Google Chrome, Opera,あとiPhoneのmobileSafari(二本指スクロール)で動作確認した。