• ベストアンサー

テーブルでスクロールを同期したい

ホームページの話なのですが。  テーブルが二つありまして、両方のテーブルにはスタイルシートの over-flow:autoをかけています。  片方のテーブルのスクロールバーを移動させれば、もう一方のテーブルもスクロールするようにしたいのですが可能でしょうか?  また、片方のスクロールバーを見えないように出来れば最高なのですが、、、  出来るのか、出来ないのか。  また、出来るのならどのようにすればよいのかご存知の方、ご教授よろしくおねがいします。

  • HTML
  • 回答数2
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • dayowl
  • ベストアンサー率56% (84/148)
回答No.1

出来ますよ。 但し、スタイルシートの「over-flow:auto」がどう影響するかわかりませんが。。。 (1)片方のスクロールバーを出さない方法 frameタグで「scrolling=no」でできます。 下の例だと左右に分割するフレームで、左側はスクロールバーを出しません。 <frameset cols="150,*" frameborder=0> <frame src="left.html" name="left" scrolling=no> <frame src="right.html" name="right"> </frameset> (2)スクロールの同期 IEで縦方向スクロールという前提にして、上記のフレーム定義を使うものとすれば 「setTimeout」を使って、 同期元のページのY座標を「document.body.scrollTop」でチェックし、 被同期側を「window.parent.left.scroll(...)」でスクロールさせることで実現可能です。

参考URL:
http://homepage2.nifty.com/BASH/WWW/JavaScript/java4.html
hot_float
質問者

お礼

 回答ありがとうございます。  また、参照URLまでつけていただいて重ねて感謝します。  dayowlさんの回答では、フレームをJavaScriptで操作する方法ですが、私はテーブルにつけたスクロールバーの制御を行いたかったのでこの方法は少し違うかなと思いました。  しかし、テーブルの中にインラインフレームの形でフレームを埋め込めれば、実現できるかもしれないと気づいたので、やってみようと思います。 ありがとうございました。

その他の回答 (1)

  • dayowl
  • ベストアンサー率56% (84/148)
回答No.2

すいません読み間違えてました。 テーブルに付けたスクロールバーですと、 スクロールバーを消すことはできなかったと思います。 なので2つのIFRAMEにそれぞれテーブルを入れて、同期させる方法ならできそうです。 こちらのURLが参考になるかも。。。です。

参考URL:
http://www.suepon.com/jsm/script/jsm37.html
hot_float
質問者

お礼

ありがとうございます。 参考URL、とても参考になりました。

関連するQ&A

  • tableで横スクロールバーが・・

    tableの高さがブラウザの表示範囲を超えると 少しだけ右の方に空白ができ、 横スクロールバーが出てきて醜い状態になってしまいます。 タグは、大まかにこのような感じで、 外部スタイルシートを適用させていて、 tableには枠線をつけています。 <body scroll="auto"> <table style="width:720px;" class="枠線、パディング、マージン等"> <tr> <td colspan="2" style="background-image:url("***.jpg(720x150pxの画像)"); width:720px;height:150px;"> <a href="リンク">リンク</a> </td> </tr> <td colspan="1" width="100%"> <!メニュー部分> </td> <td colspan="1"> <!本文部分> </td> </tr> <tr> <td> <!著作権表示> </td> </tr> </table> </body> 本文が少なければ、tableの高さがブラウザの表示範囲の中に収まるので 横スクロールバーは出ませんが、 収まらないときには横スクロールバーが出てしまいます。 横スクロールバーを出さないようにするにはどうすればよいのでしょうか? 分かりにくい箇所があればご指摘をお願いします。 回答をお待ちします。

    • ベストアンサー
    • CSS
  • テーブルスクロール firefox opera等

    私のサイトでは、テーブルにスクロールバーを表示している部分があるんですが、 firefoxやoperaなどのブラウザではスクロールバーが非表示になり、テーブル内が縦長に表示されてしまうようです。 firefox、opera、その他のブラウザで表示できるテーブル内のスクロールバーのタグ、教えてくださいっ。 すべてのブラウザに適応したタグがなければ、firefoxで表示したときのタグ、operaで表示したときのタグなどを、分け、 そのブラウザによって、表示するタグを変えるというのは、できませんでしょうか? 教えてください。 ↓現在使用しているタグです <span style="width:100%;height:72;overflow:auto;border:3px solid #eeeeee;">

  • html+CSSでテーブルのスクロール(位置固定)

    助けてください。 たとえば、10項目の列を持つテーブルがあったとします。 レコード件数は100件だとします。 画面に表示できるのは5項目、10件だとした場合、 そのテーブルに対して縦横スクロールバーを つけるのですが、その際に縦スクロールバーを下に動かした場合、 <th>列名だけはスクロールさせず、レコード部のみスクロールさせたいです。 また、横スクロールバーを右に動かした場合、5項目は固定で6項目目以降をスクロールさせたいです ※エクセルのウインドウ枠の固定 を適用したイメージ htmlとスタイルシートで実現できますでしょうか?

    • ベストアンサー
    • CSS
  • テーブルにスクロールバーをつける

    テーブルにスクロールバーをつけることは出来るでしょうか。 行数は画面に表示させておくのが5行くらいで、5行以降はスクロールバーで移動させ表示させると言う感じにしたいのです。 HTMLで出来なければ他の方法も教えて下さい。

    • ベストアンサー
    • HTML
  • テーブルのスクロール

    テーブルに長い文章を入れる必要があって、<div style="overflow:auto">を使って、スクロールしています。 Windows版のIE6.0、Netscape4.7、Netscape7.0で検証したところ、IE6.0はきちんと表示され、NN4.7はスクロールなしで、長いページが表示されました。 NN7.0では、スクロールすべきセルが背景色だけのブランクで表示されます。 これらの3つのバージョンに対応できる方法はありますか?

    • ベストアンサー
    • HTML
  • CSSだけで、テーブルにスクロールバーを表示させたいのですが…

    CSSを使い、テーブルにスクロールバーを表示させたいのですが <div style="height:60px; width:300px; overflow-y:scroll;"> <table border=1 width=300> : </table> </div> 上記の方法だと確かにスクロールバーは表示されるのですが、出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか? 出来れば、スクロールバーの色を変更して、横(X軸)のスクロールバーも消したいのですが… CSSで .scroll { overflow: scroll; visibility: visible; height: 100px; width: 140px; } とやってみたのですが、どうしてもスクロールバーが表示されません。何が足りないのか、もしくは根本から間違っているのかがわかりません。 ご存知の方教えて下さい。

    • ベストアンサー
    • HTML
  • テーブルの特定のセル背景非スクロールについて

    テーブルで文章を書いているのですが、 そのテーブル内の文章がちょっと長めで、 どうしてもブラウザがスクロール(縦)してしまう作りになっています。そのテーブルに背景を入れようと思うのですが、スクロールしてしまうほど長い縦テーブルな故に背景も繰り返してしまいます。 背景画像は壁紙のような整列された画像ではなく、一枚の写真を使用したいとおもっております。 縦長の大きい背景を作るというのも一つの手ですが・・・それではなくタグ命令で固定できればと思います。 通常のページ背景ですと背景固定は ◆bodyタグで bgproperties="fixed" ◆スタイルシートで <STYLE type="text/css"> <!-- BODY{background-image:url("■.jpg"); background-color:#背景色; background-position:背景の位置; background-repeat:no-repeat; background-attachment:fixed;} --> </STYLE> って出来るのですが、 テーブル内部の特定のセル背景固定というのは どのようにしたら出来るのでしょうか? ジャバスクリプト、スタイルシート、通常のタグ どのような方法でもかまいません。 テーブル内の特定のセル背景非スクロールについて、 ご教授いただければ幸いです。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • フレームのスクロール設定について

    HPリニューアルにともない、スタイルシートとフレーム(上に1つ、下に右左2つの計3つのフレーム)を使ってプログラミングしているのですが、スクロールバーの設定がうまくできません。 TOPページにはスクロールバーは表示したくないので、フレームと一緒にスクロール非表示の設定にしてあるのですが、そうすると他のページにリンクせててもスクローリングされません。 autoに設定するとTOPページにもスクロールバーが表示されてしまい、ほかになにか方法があれば教えていただきたいです。 よろしくおねがいいたします。

    • ベストアンサー
    • HTML
  • スクロールバー

    アイフレームを利用してHPを作っているのですが、アイフレームの中の 横にスクロールするバーだけを消したいのですがそんなことは出来ますか? スタイルシートなどで出来るのでしょうか・・・?? (縦にスクロールするバーはとっておきたいんです) 教えてください。よろしくお願いします。

    • 締切済み
    • CSS
  • スクロールバーについて

    全ページのスクロールバーを変えたいのですが、 やはり各ページにスタイルシートを記述しなければいけないのでしょうか?

    • ベストアンサー
    • HTML

専門家に質問してみよう