JavaScript集（フレーム　スクロールバー操作）

■フレーム　スクロールバー操作（縦バー）
フレームでスクロールバーの制御の仕方です。

フレーム画面で、横に２つ画面があった場合片方の画面のスクロールバーを上下させると、もう片方のスクロールバーも同期を取って動くようにする方法です。

Javascriptの書き方は以下のようになります。

<HTML>
<HEAD>
<script language="JavaScript1.2">
<!--
window.onload=init

ie=false
nn=false
if(document.all){ie=true}
if(navigator.appName=="Netscape"||navigator.userAgent.indexOf("Opera")!=-1){nn=true}

function init(){
if(ie){
frames[0].document.body.onscroll=scrollie
frames[1].document.body.onscroll=scrollie
}
if(nn){
scroll=new Array(0,0)
scrollnn()
}
}

function scrollie(){
if(frames[0].event){
frames[1].scrollTo(0,frames[0].document.body.scrollTop)
}
if(frames[1].event){
frames[0].scrollTo(0,frames[1].document.body.scrollTop)
}
}

function scrollnn(){
var scr0=frames[0].pageYOffset
var scr1=frames[1].pageYOffset
if(scr0!=scroll[0]){
//左がスクロール
frames[1].scrollTo(0,scr0)
scroll[0]=scr0
scroll[1]=scr0
}else{
if(scr1!=scroll[1]){
//右がスクロール
frames[0].scrollTo(0,scr1)
scroll[0]=scr1
scroll[1]=scr1
}}
setTimeout("scrollnn()",500)
}
//-->
</script>
</head>
<body>
<frameset cols=*,*>
<frame src=1.html>
<frame src=2.html>
</frameset>

</body>
</html>

サンプルはこちらをご覧ください。


■フレーム　スクロールバー操作（横バー）
フレームでスクロールバーの制御の仕方です。

フレーム画面で、縦に２つ画面があった場合片方の画面のスクロールバーを左右させると、もう片方のスクロールバーも同期を取って動くようにする方法です。

Javascriptの書き方は以下のようになります。

<HTML>
<HEAD>
<script language="JavaScript1.2">
<!--
window.onload=init

ie=false
nn=false
if(document.all){ie=true}
if(navigator.appName=="Netscape"||navigator.userAgent.indexOf("Opera")!=-1){nn=true}

function init(){
 if(ie){
   frames[0].document.body.onscroll=scrollie
   frames[1].document.body.onscroll=scrollie
 }
 if(nn){
   scroll=new Array(0,0)
   scrollnn()
 }
}

function scrollie(){
 if(frames[0].event){
   frames[1].scrollTo(frames[0].document.body.scrollLeft,0)
 }
 if(frames[1].event){
   frames[0].scrollTo(frames[1].document.body.scrollLeft,0)
 }
}

function scrollnn(){
 var scr0=frames[0].pageXOffset
 var scr1=frames[1].pageXOffset
 if(scr0!=scroll[0]){
   //上がスクロール
   frames[1].scrollTo(scr0,0)
   scroll[0]=scr0
   scroll[1]=scr0
 }else{
   if(scr1!=scroll[1]){
     //下がスクロール
     frames[0].scrollTo(scr1,0)
     scroll[0]=scr1
     scroll[1]=scr1
   }
 }
 setTimeout("scrollnn()",500)
}
//-->
</script>
</head>
<body>
<frameset rows=*,*>
<frame src=3.html>
<frame src=4.html>
</frameset>

</body>
</html>

サンプルはこちらをご覧ください。


WWW トップページへ戻る