- ベストアンサー
スタイルシートを使った（ｉｆｒａｍｅのような）複数スクロールのシンクロ
フレームやiframeを使わずにスタイルシートを使って画面を分割しました。 ※外枠の大きなＴＢＬを４分割して右上のセルは横見出し、左下のセルは縦見出し、右下のセルは明細としてそれぞれセルの中にさらにＴＢＬを定義しました。 それらのＴＢＬにはスタイルシートではみだすところは overflow:autoでスクロールするようにしてます。 ここで質問です。 それぞれのスクロールバーをシンクロして動かすにはどうすればいいのでしょうか？ （右下のセルの中のＴＢＬのスクロールバーを動かすと左下のセルの中のＴＢＬのスクロールバーがシンクロして動く、という動き）
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (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は使えません。 よろしくお願いします。
関連するQ&A
- iframeの横スクロール
iframeを使ってほかのページを表示させているのですが、 どうしても横スクロールバーが出てしまうのでcssのbody要素に 「overflow-x: hidden;」と入れました。 確かにiframeの横スクロールバーは消えましたが、ページの横スクロールも消えてしまいました。 div idでiframeを囲ってcssでその場所だけに「overflow-x: hidden;」を入れると今度は横スクロールバーが消えません。。 色々調べてみたのですが同じような人がいないようで； 詳しい方教えていただけないでしょうか。 （説明がへたくそですみませんm(_ _)m）
- ベストアンサー
- その他([技術者向] コンピューター)
- フレームを使わずに画面分割したいです
IFRAMEやFRAMEを使わずに画面の中で縦横見出し固定の表を作りたいのです。（エクセルで言うセルの固定みたいな事です） つまり画面を４分割して右下の部分を縦横スクロールすると右上、左下がシンクロしてスクロールするという画面です。 IFRAMEだと実現できるのですが、右下の部分に入力フォームを作ってFRAME外に更新ボタンを配置したいためPOSTするには画面間で情報の受け渡しが必要になるので採用できません。 わかりにくい文章で申し訳ないですが、随時補足しますので知恵をお貸しください。
- ベストアンサー
- HTML
- iframeのスクロールバー位置を保持した状態で印刷
iframeのスクロールバー位置を保持した状態で印刷 HTMLで、iframeの内部に画像を表示しています。 画像のサイズがiframeのサイズよりも大きいためスクロールバーがあるのですが、 表示させたい位置にスクロールバーを移動させた状態で印刷しようとすると、 表示位置がiframeの左上（画像の左上）に戻ってしまいます。 スクロールバーの位置を保持した状態で印刷することは可能でしょうか？ スタイルシート、javascriptも利用可能です。
- 締切済み
- HTML
- iframeのスクロールバー
iframeの中に、 縦のスクロールバーは出てもいいのですが 横のスクロールバーは出したくないので、表示するファイルはテーブルで幅を固定してるのですが、どうしても横にスクロールバーが出てしまいます。 でないものもあります・・・。 何がいけなくて横のスクロールバーが出てしまうのでしょうか？？ よろしくお願いいたします。 ↓こちらです。 http://sound.jp/goldcherry/hp/prof.html wearという欄にどうしても横スクロールバーが出てしまって困ってます。
- ベストアンサー
- ホームページ作成ソフト
- スタイルシートでスクロールバーの設定
スクロールバーをスタイルシートで指定したいのです。 この時、横方向（左右）のスクロールバーを表示させないようにするにはどうしたらいいでしょうか。 縦方向だけ必要なのです。
- ベストアンサー
- CSS
- スタイルシートでスクロールは可能ですか？
以下のように、フッターを下部に固定し上部をスクロールするようにしました。スクロールバーは出て(IE6.0)フッターとの重なりは阻止されますが、スクロールバーの操作はできません。 ＜scroll=内容を切り抜く＞ということから当然のことなのでしょうか？ <!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Test</TITLE> <STYLE type="text/css"> #left { position:absolute; top: 130px; left: 100px; width: 300px; overflow: scroll; } #main { position:absolute; top: 130px; left: 400px; } #right { position:absolute; top: 130px; left: 700px; } #footer { position:absolute; bottom: 0px; left: 100px; } </STYLE> </HEAD> <BODY> <div id="left"> left<br/> <br/> left<br/> </div> <div id="main"> main </div> <div id="right"> right </div> <div id="footer"> footer </div> </BODY> </HTML>
- ベストアンサー
- ホームページ作成ソフト
- スクロールバーのスタイルシートについて。
スクロールバーの色を変えるスタイルシートで質問です。 下記スタイルシートを使うとそれが出来るのですが、たとえば ＨＰをフレームで2つに分けた場合、全部のページにスタイルシートを 書かなければいけないんでしょうか？一番最初のページだけではうまく いきませんでした。分かる方お手数ですが教えて頂けないでしょうか。 <style type="text/css"> body { scrollbar-face-color: #ffffff; scrollbar-highlight-color: #330066; scrollbar-shadow-color: #330066; scrollbar-3dlight-color: #ffffff; scrollbar-arrow-color: orange; scrollbar-track-color: #ffffff; scrollbar-darkshadow-color: #ffffff; } </style>
- ベストアンサー
- HTML
- iframeに横スクロールを出現させない方法（IE６）
いつもお世話になっております。 今回は、IE６でiframeの横スクロールバーを出現させない方法がわからずこちらで質問させていただきました。 TOPページにindex.htmlを置いており、indexにiframeを3つ(top.html/menu.html/main.html)作成し、ページを作っております。 top/mainの2箇所に問題は無く、menuの部分での質問です。 iframeは幅200pxで設定しており、その中に幅指定100%のmanu.htmlをiframe src=""で埋め込んでいます。 menu.htmlには幅200pxで作成した背景画像(no-repeat)と、幅100%指定のiframeを使用しております。 menu.htmlに対しCSSで overflow: auto;を当てていますが、スクロール表示しないといけない状態に画面を変更した場合横スクロールが消えない状態です。（IE７ではきえるのですが…） IE6の特徴の、文章等がある場合親のサイズに合わすことが要因だと思いますが、iframe/menu.htmlのサイズを変更させず横スクロールを表示させないことは可能でしょうか？（menu.htmlを180px固定とか、index.htmlのiframeをscroll="yes"にすれば平気ですが、不恰好になるので…） よろしくお願いいたします。
- ベストアンサー
- HTML
- HPが上手く表示されないんです
自作HPが実家のPCで上手く表示されないんです(´-`) そのページは、まずフレームで横に分割の後、縦に分割して3分割の状態にし(図1)、上ページに縦分割のフレームページを読み込ませて、全部で4分割されたページです(図2)。 ┌───┐ ├┬──┤←図1 └┴──┘ ┌┬──┐ ├┼──┤←図2 └┴──┘ それで、右下フレーム以外のBODYタグ内に「style="overflow-x:hidden;overflow-y:hidden;"」と書き、右下フレームにもスクロールバーの色をオレンジ色に変えるスタイルシートを読み込ませています。 でも実家のPCでは、全フレームにスクロールバーが出ていて、右下フレームのスクロールバーもオレンジ色じゃないんです。 私自身のや学校のPCで表示した時はスクロールバーは出ません。たぶん実家のPCのブラウザ設定に原因があると思います。何か考えられる原因があれば教えて下さいm（_ _）mその他、友達のHPの掲示板(CGI)も表示されなくて、書き込めなくて困ってます。そちらの解決法もあれば教えて下さい。実家のPCはWin98、IE4.0です。バージョンが古いだけでしょうか? また、自作HPの方で同じような表示になる別の書き方は無いでしょうか? 右下のフレーム以外は飾りみたいな感じです。右上フレームの背景は横に、左下フレームには縦に緑のギザギザが続くようにして、左上フレームの背景は全面が緑色になるようにしています。そして左下フレームにメニューを縦に並べてます。右下フレームにメニューで選んだ内容が表示されます。 (本当はHPのURLを書いた方が早いんでしょうけど…) やはりフレームを使わない方が良いでしょうか?何か良い案があれば教えて下さい。お願いします。
- ベストアンサー
- HTML
- CSSを使ってのiframe
xhtmlとcssでhpを作ってます。 iframeをcssで表現したいんですが、どうしてもフレーム枠に１pxほどの枠が出てしまいますので、それを無くしたいのと、スクロールバーが出ないようにしたいのですが、どのような書き方がベストでしょうか？ どなたかアドバイスをお願いします。 現状では以下の書き方をしております。 -----css----- #top{ float:left; text-align:left; width:300px; } #top_iframe{ overflow:auto; width:300px; height:150px;} -----html----- <div id="top"> <iframe src="xxx.html" title="top">更新</iframe> </div> 希望としては現状の幅300px 高さ150pxで、枠が無くスクロールバーもでないようにしたいのですが・・・ <<当方初心者なので、お返事頂けるさいにはcssとhtmlのタグでご回答願います。>>
- ベストアンサー
- HTML
- ブラザーインクジェットプリンターを使用していて、見舞い袋の氏名印刷で用紙違いと表示されて印刷ができない問題が発生しています。
- パソコンの印刷プレビューには表示されるが、J987Nのプロパティでユーザー設定の用紙サイズを変更しても用紙違いと表示されて印刷せずに白紙のまま排出されます。
- お使いの環境はWindows11で、接続は有線LAN、電話回線は光回線です。関連するソフト・アプリは特にありません。
お礼
完璧です。。。 ありがとうございました！！