
ブラウザのスクロールバーの制御をしたいのですが、
いい方法が見つかりません。
たとえば、縦の長さ800pxある画像を表示させたときに
500pxまではブラウザのスクロールバーを非表示にさせ、
500px以下になったときにはじめてスクロールバーが表示される形を再現したいです。
この時、例えばブラウザウィンドウの縦幅を480pxにした場合は
差分の20px分のみのスクロールバーが出てきてほしいのですが、
単純にjavascriptで判別させてoverflowの切り替えをしてしまうと、
800px分のスクロールバーが出てしまうのです。
ちなみに画像は背景としてではなく、あくまでも画像として配置したいと思っています。
何かいい方法があればご教授ください
A 回答 (3件)
- 最新から表示
- 回答順に表示
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)の処理を再度実行。
という感じでもいけそうに思います。
この回答への補足
ありがとうございます。
教えていただいたやり方で試してみましたが、どうやら再現できないようです。。
すいません。。もしかしたら伝わっていないのかもしれないですが。。
感じとしては、、
ブラウザウィンドウサイズが500以上であれば
bodyタグをoverflow:hidden、
500以下なら、overflow:autoとする。
・・・ですが、500以下の時のスクロールできる範囲を
800px分ではなく500px分にしたいのです。
スクロールの範囲を指定する事ってそもそも出来るのでしょうか?
どうも分かりづらくてすみませんが、
よろしくおねがいします。
No.1
- 回答日時:
ごめんなさい、正直何がしたいのかよくわかっていませんが
その「やりたい事」は、そもそも出来ないか、
出来たとしても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/
分かりづらくてすみませんが、
よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
DirectXで画像表示
-
テキストの横にアイコンを並べたい
-
画像の上に
-
テーブルの中の背景画像固定に...
-
画像上に文字を表示するとiPhon...
-
簡単ホームページでの質問です!
-
コーディング中、右側に謎の余...
-
gif画像でたまに背景がグレーに...
-
疑似要素で背景画像に指定したS...
-
<hr>の縦バージョンはありますか?
-
画像の大きさに合わせて文字の...
-
PDFの保存ボタンが表示されません
-
たくさんのjpgファイルをスクロ...
-
バナーの貼り方とバナーにリン...
-
アドレスがあっているのにバナ...
-
透明度を保ったまま保存する為...
-
透過背景画像のビットマップ形...
-
プリクラにセーラームーンの加...
-
BMPファイルを透過する
-
HTMLでHP制作、画像の横にアン...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像とその下にあるテキストの...
-
<hr>の縦バージョンはありますか?
-
【Webサイト】画像が小さく表示...
-
【至急お助け!】チェックボッ...
-
iframe内をクリックさせない方...
-
background-repeat CSS で切れ...
-
画像上に文字を表示するとiPhon...
-
lightbox2で画像を天地左右中央...
-
background-sizeの背景で最小値...
-
IMGタグで画像の繰り返し使用は…
-
CSSでの動画のマスク処理
-
HP作成 作成した画像を動画の上...
-
background-sizeでcontainする...
-
同じ画像 複数回使用
-
テキストにマウスを置いた時に...
-
画像の上にテキスト配置で、拡...
-
WEB上でディレクトリ内の画像を...
-
ブロック単位にして文字列を配...
-
Chat GTPで、12月のカレンダー...
-
ロールオーバーで横に並べる方...
おすすめ情報