• 締切済み

ブラウザのスクロールバーの長さを制御

ブラウザのスクロールバーの制御をしたいのですが、 いい方法が見つかりません。 たとえば、縦の長さ800pxある画像を表示させたときに 500pxまではブラウザのスクロールバーを非表示にさせ、 500px以下になったときにはじめてスクロールバーが表示される形を再現したいです。 この時、例えばブラウザウィンドウの縦幅を480pxにした場合は 差分の20px分のみのスクロールバーが出てきてほしいのですが、 単純にjavascriptで判別させてoverflowの切り替えをしてしまうと、 800px分のスクロールバーが出てしまうのです。 ちなみに画像は背景としてではなく、あくまでも画像として配置したいと思っています。 何かいい方法があればご教授ください

  • uviol
  • お礼率44% (4/9)
  • CSS
  • 回答数3
  • ありがとう数1

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

#2です。 外側はdivではなくて、bodyですね。 失礼。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

内容がよくつかめていないのですが… こんなことでしょうか? <div style="height:100%; overflow:auto;">  <div style="min-height:500px;">   <!-- テスト用画像 -->   <img src="A.jpg" style="height:800px;">  </div> </div> はずしていたら失礼。 javascriptでもよければ 1)上記構造の内側のdivをoverflow:hiddenにしておいて、  スクリーンサイズが500以上あればdivサイズをそれに合せる  (500以下なら500) 2)リサイズイベントで、1)の処理を再度実行。 という感じでもいけそうに思います。 

uviol
質問者

補足

ありがとうございます。 教えていただいたやり方で試してみましたが、どうやら再現できないようです。。 すいません。。もしかしたら伝わっていないのかもしれないですが。。 感じとしては、、 ブラウザウィンドウサイズが500以上であれば bodyタグをoverflow:hidden、 500以下なら、overflow:autoとする。 ・・・ですが、500以下の時のスクロールできる範囲を 800px分ではなく500px分にしたいのです。 スクロールの範囲を指定する事ってそもそも出来るのでしょうか? どうも分かりづらくてすみませんが、 よろしくおねがいします。

  • crzmoto
  • ベストアンサー率66% (6/9)
回答No.1

ごめんなさい、正直何がしたいのかよくわかっていませんが その「やりたい事」は、そもそも出来ないか、 出来たとしてもhtmlやCSSだけでは実現できないと思います。 出来るとしたらJavascriptかな。 本当に、「ブラウザのスクロールバー」を制御したいのであれば・・・ 普通の方法では制御できませんし、 またする意味もないと思います。 「画像の高さ」を基準に制御するのが、使いやすいかというと・・・そうではありませんし。 閲覧する側が使用しているモニターのサイズはまちまちで、 またブラウザの種類や表示しているツールバーなどでも「ブラウザの閲覧領域の高さ」というのは変化します。 なので、 ------------- たとえば、縦の長さ800pxある画像を表示させたときに 500pxまではブラウザのスクロールバーを非表示にさせ、 500px以下になったときにはじめてスクロールバーが表示される形 ------------- この時、閲覧者のモニターサイズ(閲覧領域の高さ)が、もし最大にしても500px以下だったら?(現実的にありそうなサイズか田舎はとりあえず置いておいて) どこまで行ってもスクロールバーが表示されない・・・ってコトにはなりませんかね? まぁ、ワタシが思っているのと違うかもしれませんし。 もし、「こんな風に」と思っているのと、同じ制御を実現できているサイトがあるようでしたら、URLを教えてください。

uviol
質問者

補足

ご回答ありがとうございます! javascriptを用いた方法で構いません。 ------------- 500px以下だったら? どこまで行ってもスクロールバーが表示されない・・・ってコトにはなりませんかね? ------------- 500px以下だとスクロールバーは出るので、画像の下側が見られないという事ですよね? 500px以下のモニタ環境のユーザーが見られない部分は、テキスト情報ではなくデザイン的な要素なので、必ず見せる必要があるわけじゃないのです。 数日前から参考になるサイトをずっと探していたのですが、 海外でも見つからなかった為今回こちらに投稿させていただきました。 同じではないのですが、 構造的に似ているものとしてフルFlashのサイトでよく使用される swfforcesizeやswffitに感覚が似ています。 指定のパラメーターに数値を入れると指定のサイズまではバーがでないという部分をswfに対してではなく、画像ファイルにしたいのです。 http://blog.pixelbreaker.com/flash/swfforcesize http://swffit.millermedeiros.com/ 分かりづらくてすみませんが、 よろしくお願いします。

関連するQ&A

  • クロームとサファリでスクロールバーが表示されない

    Macのグーグルクロームとサファリでスクロールバーを表示させる方法を教えて下さい。 ちなみにWindowsでは表示されていると思うのですが・・・ 下記のように、縦幅を指定し、その中で入り切らない文章を下にスクロールさせるようなページを作成したのですが、ブラウザによりスクロールバーが見えないとなると、人によっては下にまだ内容がある事に気づかないという事が起こってしまうのではと心配です。 #content { text-align: left; padding: 0px; width: 340px; height: 500px; float: left; margin: 0px; overflow-y: auto; overflow-x: hidden; } 何かやり方があれば是非教えて下さい。 宜しくお願いします。

    • 締切済み
    • CSS
  • 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
  • スクロールバーの幅を取得するには?

    対象はIE6~8です。 CSSの overflow-y: scroll; で表示される垂直スクロールバーについてなのですが、 これは対象領域の横幅がスクロールバーの横幅よりも細いと、スクロールできなくなります。 (使用不可のグレー表示になります) ある機能を実現するために、スクロールバーだけを独立して表示させたかったので、 ぎりぎりの横幅(18px)を指定していたのですが、問題が起きました。 デスクトップでの右クリックから開ける「画面のプロパティ」→「デザイン」で、 フォントサイズを変更したり、あるいは詳細設定でDPIを変更すると、 スクロールバーの幅が変わってしまうために、「ぎりぎりの横幅」も変わってしまいます。 それにより、18pxの指定ではグレー表示となり動かせなくなりました。 この解決策を求めています。 現状としては、JavaScriptでスクロールバーの幅を取得できれば、 初期表示時に補正できるので、一番手軽と考えているのですが・・・ よろしくお願い致します。

  • スクロールバーのデザインを変えたい

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

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

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

  • スクロールの制御について・・・。

    フレームを使わずにスクロールの制御ってできますか? スクロールバーを非表示にしたいのですが・・・。

    • ベストアンサー
    • HTML
  • ブラウザのサイズを変えたら、divのボックスの高さも合わせて

    ブラウザのサイズを変えたら、divのボックスの高さも合わせて 可変できるようにしたいです。 さらに、可変したdivのボックスの高さより内容量が多い場合は ブラウザのスクロールバーのようにCSSのoverflow:autoで スクロールが表示されるようにしたいと考えております。 現時点で、スクロールバーはオリジナルの画像で作成しており、 表示させるのにjScrollPane.jsというJavaScriptを使用しています。 しかし高さが固定されており、カスタマイズしようと思っているのですが なかなかうまくいきません。 どなたか、実現方法をご教授願えますでしょうか。 よろしくお願いいたします。 ※情報不足であれば、追記いたしますのでご指摘お願いいたします。

  • スクロールバー

    gooブログアドバンスでカスタムブルーのテンプレ使ってます。 左のサイドバーに縦のスクロールバーを設置したいのです サイドバー全部ではなくENTRY ARCHIVE(過去の年月)だけに設置したいのですが方法が分かりません menuBgに下記のソースを設置したらサイドメニュー全体になります overflow : auto ; /*スクロールバー*/ height : 185px; /*バーの高さ範囲設定*/ 色々やって見ましたが分かりませんのでご存知の方、ご教授できませんか?

  • スクロールバーの制御

    [チャット使用時にスクロールバーのデフォルトの位置を下にしたい。] PerlによるCGIでチャットを作成しております。 アプリケーションのチャットの場合はレスをすると前の発言の下の行に加えられる 場合が多いです。 しかし、多くのCGIチャットではその逆でレスは直前の発言の上の行に追加 され,より過去の発言をみるためには下方向にスクロールさせます。 私の自作チャットではスクロールバーを最下端に設定したいのですが方法がわからないので教えてください。 本心としてはHTMLのみ(JavaScriptなし)にしたかったのですが調べたところ スクロールバーの色の設定などにJavaScriptを使っている場合が多かったので JavaScriptならできるかと思い質問いたしました。 質問やご回答お願いいたします。 [実行環境] WindowsXP+ActivePerlv5.80+Apache1.3.28+IE6.0 [自分の知識] JavaScript :なし Perl:入門書読んでいる最中。簡単な掲示板程度なら作成可能 HTML:リファレンスを見ながら使う程度 その他Webプログラム知識:入門書レベルのJavaApplet

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

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

    • ベストアンサー
    • CSS

専門家に質問してみよう