ページ

2011年2月8日火曜日

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


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

とかやってやると


こんな感じになる。
aaa












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


でこんな風に。
aaa










bbb












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



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


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

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

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

0 件のコメント:

コメントを投稿