
ブラウザのスクロールバーの制御をしたいのですが、
いい方法が見つかりません。
たとえば、縦の長さ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で質問しましょう!
似たような質問が見つかりました
- gooブログ 記事の下にスクロールバーが表示される 2 2022/08/19 20:42
- Photoshop(フォトショップ) 【Photoshop】画像拡大時に急激に画面外まで拡大してしまうのを制御したい 1 2023/08/25 03:04
- その他(ブラウザ) テキストを入れるときの縦線の点滅がそれ以外のブラウザ上にも表れます。 1 2022/07/29 21:55
- その他(IT・Webサービス) このサイトのスクロール逆じゃないですか? 1 2022/10/05 20:48
- その他(プログラミング・Web制作) マウスオーバー→ホイール回転でスクロールできない 2 2022/10/31 10:06
- JavaScript ブラウザの横幅に応じてとある画像(e.jpg)を画面いっぱいに表示できるようにしたいです。(写真の横 1 2022/10/06 21:17
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- JavaScript 空白で入力フォームのボタンをクリックしたら、ブラウザの上部からjavascriptで 表示されるアラ 1 2022/05/20 11:16
- その他(プログラミング・Web制作) 【GAS】Gmail本文をブラウザ表示された状態でPDFにしたいです 1 2022/12/12 09:54
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像とその下にあるテキストの...
-
IMGタグで画像の繰り返し使用は…
-
画像の上にテキスト配置で、拡...
-
要素の幅をいろんな写真の幅に...
-
<hr>の縦バージョンはありますか?
-
iframe内をクリックさせない方...
-
【Webサイト】画像が小さく表示...
-
HP作成 作成した画像を動画の上...
-
ホームページの背景について・・
-
大至急。webのシングルページを...
-
WEB上でディレクトリ内の画像を...
-
画像上に文字を表示するとiPhon...
-
インラインフレームが画面サイ...
-
background-repeat CSS で切れ...
-
ページごとに背景画像を変更し...
-
background-sizeでcontainする...
-
横罫線に文字を入れる方法
-
lightbox2で画像を天地左右中央...
-
画像の大きさに合わせて文字の...
-
background-sizeの背景で最小値...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
画像とその下にあるテキストの...
-
background-repeat CSS で切れ...
-
<hr>の縦バージョンはありますか?
-
WEB上でディレクトリ内の画像を...
-
IMGタグで画像の繰り返し使用は…
-
画像の上にテキスト配置で、拡...
-
同じ画像 複数回使用
-
background-sizeでcontainする...
-
iframe内をクリックさせない方...
-
要素の幅をいろんな写真の幅に...
-
background-sizeの背景で最小値...
-
ページごとに背景画像を変更し...
-
lightbox2で画像を天地左右中央...
-
CSSのrepeatで切れ目が出る
-
画像の大きさに合わせて文字の...
-
フッターの背景に色を指定した...
-
Safariでのひどいレイアウト崩れ
-
CSSで背景画像をランダムに表示...
おすすめ情報