- ベストアンサー
スタイルシートを使った（ｉｆｒａｍｅのような）複数スクロールのシンクロ
フレームやiframeを使わずにスタイルシートを使って画面を分割しました。 ※外枠の大きなＴＢＬを４分割して右上のセルは横見出し、左下のセルは縦見出し、右下のセルは明細としてそれぞれセルの中にさらにＴＢＬを定義しました。 それらのＴＢＬにはスタイルシートではみだすところは overflow:autoでスクロールするようにしてます。 ここで質問です。 それぞれのスクロールバーをシンクロして動かすにはどうすればいいのでしょうか？ （右下のセルの中のＴＢＬのスクロールバーを動かすと左下のセルの中のＴＢＬのスクロールバーがシンクロして動く、という動き）
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
判りやすく直しましたが、横スクロールにももともと対応してますよ～。 <html> <style type="text/css"> table {width:850px;height:500px; background-color:white; border-color:black; border-collapse:collapse; margin-left:0px;} td {border:2px solid;} div {overflow:auto; width:100%; height:100%; scrollbar-base-color:gray;} </style> <script> function xx(){ nakami.scrollLeft=yoko.scrollLeft; } function yy(){ nakami.scrollTop=tate.scrollTop; } function zz(){ yoko.scrollLeft=nakami.scrollLeft; tate.scrollTop=nakami.scrollTop; } </script> <body> <table cellspacing="0"> <tr> <td valign="top" style="width:100px;height:100px;"> <div style="width:100px;height:100px;"> </div> </td> <td valign="top" style="width:750px;height:100px;"> <div id="yoko" onScroll="xx()" style="width:750px;height:100px;"> <script> str=""; for(i=0;i<80;i++){ str+="A"; } document.write(str); </script> </div> </td> </tr> <tr> <td valign="top" style="width:100px;height:400px;"> <div id="tate" onScroll="yy()" style="width:100px;height:400px;"> <script> for(i=0;i<100;i++){ document.write("AAAAA<br>"); } </script> </div> </td> <td valign="top" style="width:750px;height:400px;"> <div id="nakami" onScroll="zz()" style="width:750px;height:400px;"> <script> str=""; for(i=0;i<80;i++){ str+="A"; } str+="<br>"; for(i=0;i<100;i++){ document.write(str); } </script> </div> </td> </tr> </table> </body> </html> .
その他の回答 (2)
- arenani_sorenani
- ベストアンサー率73% (58/79)
遅くなりました。以下のソースのような感じでよろしいでしょうか・・・・ 試してませんがNNとかIE以外のブラウザでは動かないみたいです。 クロスブラウザで実装するにはより複雑なスクリプトになります。 <html> <style type="text/css"> table {width:98%; height:100%; background-color:white; border-color:black; border-collapse:collapse; margin-left:0px;} td {border:2px solid;} div {overflow:auto; width:100%; height:100%; scrollbar-base-color:gray;} </style> <script> function xx(){ nakami.scrollLeft=yoko.scrollLeft; } function yy(){ nakami.scrollTop=tate.scrollTop; } function zz(){ yoko.scrollLeft=nakami.scrollLeft; tate.scrollTop=nakami.scrollTop; } </script> <body> <table cellspacing="0"> <tr> <td valign="top" style="width:10%;height:10%;"> <div> </div> </td> <td valign="top" style="width:90%;height:10%;"> <div id="yoko" onScroll="xx()"> <script> str=""; for(i=0;i<80;i++){ str+="A"; } document.write(str); </script> </div> </td> </tr> <tr> <td valign="top" style-"width:10%;height:90%;"> <div id="tate" onScroll="yy()"> <script> for(i=0;i<100;i++){ document.write("AAAAA<br>"); } </script> </div> </td> <td valign="top" style="width:90%;height:90%;"> <div id="nakami" onScroll="zz()"> <script> str=""; for(i=0;i<80;i++){ str+="A"; } str+="<br>"; for(i=0;i<100;i++){ document.write(str); } </script> </div> </td> </tr> </table> </body> </html> .
お礼
ご回答ありがとうございます。 まさにこのとおりです。 さらにいうなら、右上と右下のセルに横スクロールがあって右下をスクロールすると右上もシンクロして スクロールしたいのですが、 頂いたソースを元に工夫してやってみます。 本当にありがとうございます。
- arenani_sorenani
- ベストアンサー率73% (58/79)
う～ん。良くわからんのですが イメージとしてはエクセルのウィンドウ枠固定のようなページを 作りたいということでよろしいでしょうか？
補足
わかりにくい質問で申し訳ございません。 言い方を変えてみます。 １ページにＴＢＬが２つあります。 それぞれ普通に表示するとページをはみだすので、overflow:auto でフレームっぽくスクロールで表示します。 片一方のスクロールを動かすともう片一方のＴＢＬのスクロールがシンクロして動く、 ということを実現したいです。 訳あってiframeは使えません。 よろしくお願いします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
完璧です。。。 ありがとうございました！！