overflow: auto; 要素内をスムーススクロール

このQ&Aのポイント
  • 「overflow: auto;」を使用して要素内をスムースにスクロールさせる方法について質問します。
  • ページ内リンクを疑似フレーム内でスムースにスクロールさせる方法についての質問です。
  • スクロールバーが表示される仕様で、要素内をスムースにスクロールさせる方法についての質問です。
回答を見る
  • ベストアンサー

overflow: auto; 要素内をスムーススクロール

はじめまして、よろしくお願い致します。 メニューとなるボタンをいくつか配置し、それぞれのボタン押下時に、 『overflow: auto;』の疑似フレームにて表示している要素内を スムースにスクロール移動させることは可能でしょうか。 (よくある「ページトップへ」で、ページ内リンクをスムースにスクロールさせる動きを、疑似フレームを対象に行いたいです。) 下記ページの「Section Scroller」のような方法も考えたのですが、 http://sandbox.leigeber.com/contentslider/slider.html スクロールバーが表示される仕様で実現できればと考えております。 分かりにくい説明で、サンプルコードも提示できない形での質問になりましたが、よろしくお願い致します。

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

  • ベストアンサー
  • HIRSYU
  • ベストアンサー率51% (45/87)
回答No.1

提示されている「Section Scroller」は、CSSでスクロールバーを非表示にしているだけですので、この設定を、表示にすればスクロールバーが表示されます。

savinac15
質問者

お礼

HIRSYUさんへ ありがとうございました。 おっしゃるとおり、cssの問題だけでした。 いろんなサンプルを探してはテストしていて、 このサンプルの中身を十分に確認できていませんでした。 お恥ずかしい。。。

関連するQ&A

  • 【CSS】IEでのoverflow使用時のスクロールバー

    overflow:auto;で疑似フレームを使用しています。 IEのみでスクロールバーが表示はされるのですが、 固定されてしまっていてスクロールが出来ません。 ここ数時間webで調べていたのですが、解決方法が分かりません。 解決方法はあるのでしょうか。

    • ベストアンサー
    • HTML
  • overflowのscrollを自動で移動

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

  • divのoverflowのスクロールバーを自動スクロールしたい

    初めて質問します。 overflowのスタイル設定をしたdivに、innerHTMLで上から下にどんどん文字を 追加していくのですが、下にはスクロールされず、つまり自動スクロールされず わざわざ下にスクロール必要があります。 このdivのoverflowのスクロールバーを自動スクロールしたいのですが、 可能でしょうか?参考になる文献などがございましたら、教えてください。 msg.innerHTML=msg.innerHTML+"<font size=-1>テスト</font><br>"; これを入力するごとに繰り返しています。 divのoverflow以外にいい方法があれば、教えてください。 今はmsg.innerHTML="<font size=-1>テスト</font><br>"+msg.innerHTML; で、つまり下から上に表示して無理矢理、表示させています。 どうぞ宜しくお願い致します。

  • スクロールバーを無くしてすくロースさせたい!

    タイトルのままなのですが、現在ページを作っているのですがデザインの関係からスクロールバーを表示させない仕様になりました。 CSSは、 overflow:hidden; の設定を試してみました。 しかし、この状態では当然はみ出したページ部分を読むことが出来ず困っております。 イメージとしては、overflow:hidden;の様にスクロールバーが無くなった状態でそのままスクロールできればと考えております。 フレーム方式にしたら出来るような記憶がありますが、何れにしてもフレームは使用したく無いです…。 どなたか、実現する方法をご存知の方いらっしゃいましたら、アドバイスを頂けますと助かります。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • CSSでの擬似フレームでのフレームのスクロールバーのサイズについて

    CSSで擬似フレームとしてoverflowのautoなどを使う方法がありますが、 そこで出来たフレームの枠にスクロールバーがあり、このスクロールバーのサイズをウインドウサイズの大小に合わせて可変させる事はできるものなのでしょうか? 通常のiframeを使用したインラインフレームであれば、ウインドウサイズを大きくしたり小さくしたりするとそれに合わせてスクロールバーの大きさも変わるのですが、CSSでの擬似フレームの場合、それが出来るのかどうか知りたいです。 分かる方、いらっしゃいましたらお願いいたします!

  • overflow内でのページ遷移したときに頭部分へスクロールさせたい

    商品一覧をoverflow:autoとしたdivタグの中に表示しています。 その中で次の10件というボタンを用意しAjaxで取得した情報をそのdivタグ内に反映するといった処理になります。 しかし、ブラウザのキャッシュによりスクロール位置を覚えているため次の10件に切り替えてもスクロールさせた位置で表示されます。 それをどうにか次のページを表示した場合にはY軸でのスクロール位置は上から0の位置にしたいのですが、だれか教えてもらえないでしょうか? google maps での店舗検索結果ではこれができていまいたが、ソースが解読できずでして…。

  • overflow:auto で改行させたくない

    ページ上にリストを載せています。 <DIV style="width:100%;height:65px;overflow:auto;"></div> これで、枠以上のデータがあれば上下のスクロールバーが出来ますよね。 左右についてなんですけど、枠幅以上にデータがあった場合、改行してしまいますよね。これを改行させないでそのまま画面上は非表示とは出来ないでしょうか? 200x/xx/xx 表題 内容がここに|つらつらと内容が続く ここまでは画面上に表示   ↑ここから先はソースを見れば表示 Iframeの利用は考えていません。SEO対策の為、そのページに文字情報を多く詰め込みたいと思っています。 方法があれば教えてください。

    • 締切済み
    • CSS
  • Dreamweaverでoverflow画像の位置

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

  • フレームのスクロール

    ご質問させていただきます。 1つのページを上下2つのフレームに分けます。 そして、下のフレームのページを左右にスクロールさせると、 同じように上のページが自動的に左右にスクロールする。 といったことは可能でしょうか? 上のフレームに表のタイトル 下のフレームに表のデータ を表示させようと考えています。 アドバイスよろしくお願い致します。

    • ベストアンサー
    • HTML
  • overflowの特性について

    overflow-y:autoの特性についてご教授をお願い致します。 【質問】 overflow-y:autoは、はみ出した内容(文字)は、次ページに 表示しない特性なのでしょうか。 【状況】 現在、テーブルタグに対して、overflow-y:autoを設定しております。 印刷プレビュー上、一枚に収まりきれないくらいに文字を入力した ときに、特定行数に達すると、これ以降の文字が隠れてしまいます。 また、隠れた文字は次ページにも反映されない状態です。 印刷プレビュー上、次ページに表示されるようにするためには、 どうしたらよろしいのか、ご教授お願い致します。

専門家に質問してみよう