
ブラウザのスクロールバーの制御をしたいのですが、
いい方法が見つかりません。
たとえば、縦の長さ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ランキング
-
CSSでの動画のマスク処理
-
IMGタグで画像の繰り返し使用は…
-
ブラウザによって、画面表示の...
-
background-repeat CSS で切れ...
-
HP作成 作成した画像を動画の上...
-
CSS マウスオーバーでテキスト...
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
<hr>の縦バージョンはありますか?
-
マウスオーバーで透明の白い幕...
-
background-sizeでcontainする...
-
画像の上にテキスト配置で、拡...
-
PDFの保存ボタンが表示されません
-
ロゴマークだけを抜き取って貼...
-
イラストレータに配置すると透...
-
画像貼り付け、URLに飛べる軽い...
-
バナーの貼り方とバナーにリン...
-
HTML上の画像を結合する方法が...
-
IFRAME内に収まるように画像を...
-
背景を透過加工したPNG画像を色...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像とその下にあるテキストの...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
background-sizeでcontainする...
-
iframe内をクリックさせない方...
-
画像の上にテキスト配置で、拡...
-
同じ画像 複数回使用
-
background-repeat CSS で切れ...
-
ページごとに背景画像を変更し...
-
IMGタグで画像の繰り返し使用は…
-
ホームページの背景について・・
-
要素の幅をいろんな写真の幅に...
-
画像上に文字を表示するとiPhon...
-
コーディング中、右側に謎の余...
-
cssで画像と文字を同じ位置にす...
-
lightbox2で画像を天地左右中央...
-
HP作成 作成した画像を動画の上...
-
背景が透明な画像をwebサイトに...
-
CSSでスクロールバー
おすすめ情報