| ポイント |
<![CDATA[
y = document.body.scrollTop;
parent.rightFrame.newXY(y);
function newXY(n)
{
scrollTo(0,n);
}
]]>
|
| 説 明 |
２つのフレームを同時にスクロールさせるにはスクロールした事を検知するonScrollイベントを使います。スクロールを検知したら「document.body.scrollTop」で現在のスクロール位置（座標）を取得しもう片方のフレームの関数を呼び出します。（セキュリティの都合） 呼び出されるフレームにはscrollTo()で指定位置にスクロールさせます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>２つのフレームを同時にスクロールさせる</title>
<frameset cols="50%,*">
<frame src="left.html" name="leftFrame">
<frame src="right.html" name="rightFrame">
</frameset>
</head>
</html>
]]>
|
| 補足説明 |
左側、右側フレームのHTMLファイル内容は以下の通りです。
<![CDATA[
●左側のフレーム
<html>
<head>
<title>２つのフレームを同時にスクロールさせる</title>
<script language="JavaScript"><!--
function scrl()
{
y = document.body.scrollTop;
parent.rightFrame.newXY(y);
}
function newXY(n)
{
scrollTo(0,n);
}
// --></script>
</head>
<body onScroll="scrl()">
左側のフレームです。<br><br>
<img src="image.jpg">
</body>
</html>
●右側のフレーム
<html>
<head>
<title>２つのフレームを同時にスクロールさせる</title>
<script language="JavaScript"><!--
function scrl()
{
y = document.body.scrollTop;
parent.leftFrame.newXY(y);
}
function newXY(n)
{
scrollTo(0,n);
}
// --></script>
</head>
<body onScroll="scrl()">
右側のフレームです。<br><br>
<img src="image.jpg">
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
２つのフレームを同時にスクロールさせる