プロが教える店舗&オフィスのセキュリティ対策術

ブラウザのスクロールバーの制御をしたいのですが、
いい方法が見つかりません。

たとえば、縦の長さ800pxある画像を表示させたときに
500pxまではブラウザのスクロールバーを非表示にさせ、
500px以下になったときにはじめてスクロールバーが表示される形を再現したいです。

この時、例えばブラウザウィンドウの縦幅を480pxにした場合は
差分の20px分のみのスクロールバーが出てきてほしいのですが、
単純にjavascriptで判別させてoverflowの切り替えをしてしまうと、
800px分のスクロールバーが出てしまうのです。

ちなみに画像は背景としてではなく、あくまでも画像として配置したいと思っています。
何かいい方法があればご教授ください

A 回答 (3件)

#2です。



外側はdivではなくて、bodyですね。 失礼。
    • good
    • 0

内容がよくつかめていないのですが…



こんなことでしょうか?

<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)の処理を再度実行。
という感じでもいけそうに思います。 

この回答への補足

ありがとうございます。
教えていただいたやり方で試してみましたが、どうやら再現できないようです。。
すいません。。もしかしたら伝わっていないのかもしれないですが。。

感じとしては、、
ブラウザウィンドウサイズが500以上であれば
bodyタグをoverflow:hidden、
500以下なら、overflow:autoとする。

・・・ですが、500以下の時のスクロールできる範囲を
800px分ではなく500px分にしたいのです。
スクロールの範囲を指定する事ってそもそも出来るのでしょうか?

どうも分かりづらくてすみませんが、
よろしくおねがいします。

補足日時:2011/05/27 23:33
    • good
    • 0

ごめんなさい、正直何がしたいのかよくわかっていませんが


その「やりたい事」は、そもそも出来ないか、
出来たとしてもhtmlやCSSだけでは実現できないと思います。
出来るとしたらJavascriptかな。

本当に、「ブラウザのスクロールバー」を制御したいのであれば・・・
普通の方法では制御できませんし、
またする意味もないと思います。

「画像の高さ」を基準に制御するのが、使いやすいかというと・・・そうではありませんし。
閲覧する側が使用しているモニターのサイズはまちまちで、
またブラウザの種類や表示しているツールバーなどでも「ブラウザの閲覧領域の高さ」というのは変化します。

なので、
-------------
たとえば、縦の長さ800pxある画像を表示させたときに
500pxまではブラウザのスクロールバーを非表示にさせ、
500px以下になったときにはじめてスクロールバーが表示される形
-------------
この時、閲覧者のモニターサイズ(閲覧領域の高さ)が、もし最大にしても500px以下だったら?(現実的にありそうなサイズか田舎はとりあえず置いておいて)
どこまで行ってもスクロールバーが表示されない・・・ってコトにはなりませんかね?


まぁ、ワタシが思っているのと違うかもしれませんし。
もし、「こんな風に」と思っているのと、同じ制御を実現できているサイトがあるようでしたら、URLを教えてください。

この回答への補足

ご回答ありがとうございます!
javascriptを用いた方法で構いません。

-------------
500px以下だったら?
どこまで行ってもスクロールバーが表示されない・・・ってコトにはなりませんかね?
-------------
500px以下だとスクロールバーは出るので、画像の下側が見られないという事ですよね?
500px以下のモニタ環境のユーザーが見られない部分は、テキスト情報ではなくデザイン的な要素なので、必ず見せる必要があるわけじゃないのです。


数日前から参考になるサイトをずっと探していたのですが、
海外でも見つからなかった為今回こちらに投稿させていただきました。

同じではないのですが、
構造的に似ているものとしてフルFlashのサイトでよく使用される
swfforcesizeやswffitに感覚が似ています。
指定のパラメーターに数値を入れると指定のサイズまではバーがでないという部分をswfに対してではなく、画像ファイルにしたいのです。

http://blog.pixelbreaker.com/flash/swfforcesize

http://swffit.millermedeiros.com/

分かりづらくてすみませんが、
よろしくお願いします。

補足日時:2011/05/27 15:06
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!