
ブラウザのスクロールバーの制御をしたいのですが、
いい方法が見つかりません。
たとえば、縦の長さ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を探す
今、見られている記事はコレ!
-
弁護士が解説!あなたの声を行政に届ける「パブリックコメント」制度のすべて
社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
-
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」
「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
-
釣りと密漁の違いは?知らなかったでは済まされない?事前にできることは?
知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
-
カスハラとクレームの違いは?カスハラの法的責任は?企業がとるべき対応は?
東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。 この動きは自治体...
-
なぜ批判コメントをするの?その心理と向き合い方をカウンセラーにきいた!
今や生活に必要不可欠となったインターネット。手軽に情報を得られるだけでなく、ネットを介したコミュニケーションも一般的となった。それと同時に顕在化しているのが、他者に対する辛らつな意見だ。ネットニュース...
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【Webサイト】画像が小さく表示...
-
<hr>の縦バージョンはありますか?
-
WEB上でディレクトリ内の画像を...
-
【至急お助け!】チェックボッ...
-
背景部分を透けさせてデスクト...
-
要素の幅をいろんな写真の幅に...
-
background-sizeの背景で最小値...
-
lightbox2で画像を天地左右中央...
-
ワードプレスで事前定義されたc...
-
CSSで背景画像をランダムに表示...
-
iframe内をクリックさせない方...
-
背景画像を反転させる方法
-
<BODY>タグに複数のstyle属性
-
画像の大きさに合わせて文字の...
-
画像とその下にあるテキストの...
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
背景画像をブラウザ上部に隙間...
-
インラインフレームが画面サイ...
-
下にスクロールしても、追従す...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像とその下にあるテキストの...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
background-sizeでcontainする...
-
iframe内をクリックさせない方...
-
画像の上にテキスト配置で、拡...
-
同じ画像 複数回使用
-
background-repeat CSS で切れ...
-
ページごとに背景画像を変更し...
-
IMGタグで画像の繰り返し使用は…
-
ホームページの背景について・・
-
要素の幅をいろんな写真の幅に...
-
画像上に文字を表示するとiPhon...
-
コーディング中、右側に謎の余...
-
cssで画像と文字を同じ位置にす...
-
HP作成 作成した画像を動画の上...
-
lightbox2で画像を天地左右中央...
-
ネットスケープでのスタイルシ...
-
CSSでスクロールバー
おすすめ情報