|
 |
|
複数のフレームを同時にスクロール
サンプルと機能
複数（左右/上下）のフレームを、片方をスクロールさせたらもう一方もスクロールさせます。
→ Sample
1：左右のフレームを同時にスクロールする
→ Sample
2：上下のフレームを同時にスクロールする
左右/上下のページの幅、高さは同じくらいにしておかないと動作がおかしくなります。
サンプル・ソース
緑の文字が変更箇所で、赤い文字が対応するソースです。
"/* */"内はコメントです。削除しても影響ありません。
必要な箇所をコピー＆貼り付けして編集してください。
→ Sample
1：フレーム分割ページ(フレーム名はleft,rightとします)
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET
cols="50%,50%" frameborder="YES"
border="0">
<FRAME name="left"
src="s1103_1_left.html">
<FRAME name="right" src="s1103_1_right.html">
</FRAMESET>
<NOFRAMES>
<BODY>
フレームに対応しているブラウザでご覧ください
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML> |
→ Sample
1：左フレーム
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
//
左右のフレームを同時にスクロールする
function scrPage()
{
parent.right.lfScr(document.body.scrollTop);
}
function lfScr(y) {
scrollTo(0,y);
}
//-->
</SCRIPT>
</HEAD>
<BODY
bgcolor="#ffffff" onScroll="scrPage()">
</BODY>
</HTML> |
→ Sample
1：右フレーム
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
//
左右のフレームを同時にスクロールする
function scrPage()
{
sparent.left.lfScr(document.body.scrollTop);
}
function lfScr(y) {
scrollTo(0,y);
}
//-->
</SCRIPT>
</HEAD>
<BODY
bgcolor="#ffffff" onScroll="scrPage()">
</BODY>
</HTML> |
→ Sample
2：上下のフレームを同時にスクロールする
Sample
1とほぼ同じですので省略します。
サンプルページより「右クリック」→「ソースの表示」でプログラムを確認できます。 |
解説・注意点など
スクロールバーがなければ意味がありませんので、ページの高さは十分余裕を持って設定してください。
← Webデザインテクニックに戻る
|
|
|
