• 締切済み

overflowのscrollを自動で移動

CSSでoverflow:scrollと設定したときに表示されるフレームをボタンを作ってこのボタンを押したときに○○px横に自動的にスクロールさせるようなjavascriptはどのように書けばいいのでしょうか??対応ブラウザはIEのみで大丈夫です。

みんなの回答

noname#22259
noname#22259
回答No.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>Untitled</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function moveDivTo(div,left){div.scrollLeft=left;} </script> </head> <body> <div style="overflow:scroll;width:300px;height:100px;"id="x"> test-string--test-string--test-string--test-string--test- ......................................................... ......................................................... </div> <input type=text id="y"> <input type=button value=test onclick="moveDivTo(document.getElementById('x'),document.getElementById('y').value)"> </body> </html>

関連するQ&A

  • CSSで「overflow:scroll」をしてい

    CSSで「overflow:scroll」をしているボックス内で表示している 特定のボックスを最前面に表示させることは 可能なのでしょうか。 文字では説明しにくいので 例として ------------- <STYLE type="text/css"> .box1{ overflow: scroll; width: 200px; height: 100px; } .box2{ width: 200px; height: 40px; background-color: yellow; position: relative } .box3{ width: 200px; height: 40px; background-color: pink; position: relative; left: 100px; top: -10px } </STYLE> <div class="box1"> <div class="box2">Box No.2</div> <div class="box3">Box No.3</div> </div> ------------- だとして、 <div class="box3">Box No.3</div>を <div class="box1">よりも前面に表示させたいのですが スタイルシートで実現可能なのでしょうか。 いろいろ調べながらやってみましたが 解決できなかったので知恵をお貸し頂ければと思い 投稿させて頂きました。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • overflow:scrollのスクロールバーのデザイン

    overflow:scrollのスクロールバーのデザイン 自分のHPで、あるリストを overflow:scroll にして、縦横指定して使っているんですが、その時のスクロールバーのデザインって変えられないのでしょうか。cssで、bodyに打ち込んでもダメ、そのリストのclassで指定してもダメでした。 どなたか分かる人があれば教えてください。

  • CSS)overflow,スクロールについて

    独学でホームページをツクッテいる者です。 overflow:scroll;をするとIE以外でうまく表示できません。 Firefoxなどでは、BOXの中の文字がスクロールバーごとBOXの外(右側)に大きくずれてしまいます。 IEですと、きちんとBOXの中に文字も収まり、スクロールバーも表示されます。 ためしにoverflow:scroll;をCSSから消して更新すると、文字はBOXの中に収まります。 FirefoxでもBox内がずれずにスクロールされる方法はないでしょうか?

    • ベストアンサー
    • CSS
  • Dreamweaverでoverflow画像の位置

    DreamweacerCS3です。 表示フレーム幅(1000px)よりも長い画像(2050px)をcssにてoverflow: auto に設定して、はみ出ることなく収めています。 水平スクロールバーをスライドすれば画像を全幅にわたって動かすことができています。 ページを開いたときは常にこの画像はスクロールバーが左端に寄った状態になっていますが、常時見るのは反対の右側なのでスクロールバーを右端に初期設定したいのですが方法がわかりません。ご伝授ください。  cssのプロパティを見ると100くらいのパラメータがあり、それらしきもの(float)を変えてみるのですが思うようになりません。 現在設定しているのはビューウィンドウのサイズ:(1000px, 410px)、overflow:autoのみです。

  • 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
  • スクロールバーのデザインを変えたい

    CSSの設定で div#information { height: 150px; overflow: scroll; } という風に記述した時に現れるスクロールバーのデザインを変えたいのですが、IE以外でも対応している方法はないでしょうか? スクロールバーのデザインを変えるいい方法がありましたら教えて下さい。

    • ベストアンサー
    • HTML
  • スクロールバーの非表示

    PC上で操作するシステム画面をhtml+cssで作成しました。 そのhtmlファイルを、アクティブデスクトップに設定して使用する、というものなのですが、画面に出てしまうスクロールバーを非表示にしたいのですが、JavaScriptや、cssで、scroll=hiddenや、overflow:hiddenなど設定をしても非表示にすることができません。(ブラウザでも非表示にできませんでした。) 非表示の設定に関係するかどうかわかりませんが、 html内では、 メッセージをスクロールさせるために、 <body onLoad="scroll()"> の記述と、 タブ操作をするために、フリースクリプトのtabMakerを使わせていただいています。 不十分かもしれませんが、上記の内容で解決の方法はありますでしょうか。よろしくおねがいいたします。

  • CSS:overflow要素の印刷について

    いつもお世話になってます。 CSSで、縦のoverflow要素を、"scroll"に設定しました。 そこで、画面に表示されているものだけではなく、要素全てを印刷したいのですが(>_<)方法は何かあるのでしょうか?? どなたか教えてください! よろしくお願いします。

  • CSSでoverflowがうまく操作できません。

    BINDを使っているのですが、新着情報の所をoverflow設定し、右側にスクロールバーを作りたいのですが、overflowでscroll設定しても、バーが出てこないか、出てきても新着情報の内容が全て表示され、隠れる部分も全て出てきます。しかも、情報を付け足してもひたすら縦に伸びてゆくだけで、意味がない状態になってしまいます。添付した写真のような感じになってしまいます。どのように設定したらよいのでしょうか。

  • CSSで擬似的にフレームを作りたい

    CSSのoverflow:scrollを利用した、 フレームのように一部分をスクロールできるページを考えております。 画面左側をメニューにするには <body> <div class="menu"></div> <div class="content"></div> </body> のようなHTMLに *{margin:0px;padding:0px;} html{height:100%;} body{height:100%;} .menu{height:100%;float:left;width:100px;overflow:scroll;} .content{height:100%;margin:0 0 0 100px;overflow:scroll;} のようなスタイルシートという形で可能ですが、 上側をメニューにするにはどのようにすれば良いでしょうか?

    • ベストアンサー
    • HTML

専門家に質問してみよう