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

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

	<div style="width:100px; height:100px; overflow:auto; border-style:solid">
	aaa<br><br><br><br><br><br><br><br><br><br>
	</div>

view raw css_iframe.html hosted with ❤ by GitHub

とかやってやると


こんな感じになる。

aaa

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

	<div id="hidari" style="width:100px; height:100px; overflow:hidden; float:left; border-style:solid">
	aaa<br><br><br><br><br><br><br><br><br><br>
	</div>
	<div id="migi" style="width:100px; height:100px; overflow:auto; float:left; border-style:solid">
	bbb<br><br><br><br><br><br><br><br><br><br>
	</div>
	<div style="clear:both"></div>

view raw css_iframe_two.html hosted with ❤ by GitHub

でこんな風に。

aaa

bbb

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



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

	$(function(){
	var migi = $("#migi");
	var hidari = $("#hidari");
	migi.scroll(function(){
	hidari.scrollTop(migi.scrollTop())
	});
	});

view raw scroll_both.js hosted with ❤ by GitHub

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

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

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