ブラウザのスクロールバーでスクロール領域を限定したい
- ブラウザのスクロールバーでスクロール領域を限定する方法を教えてください。
- JSやCSSを使用して、ブラウザのスクロールバーをコンテンツの範囲内だけに制限する方法について教えてください。
- ブラウザのスクロールバーをコンテンツの範囲内に制限できるJSやCSSの方法を教えてください。
- ベストアンサー
ブラウザのスクロールバーでスクロール領域を限定したい。
ブラウザのスクロールバーでスクロール領域を限定したい。 お世話になります。 左に縦長のswf、真ん中にコンテンツ、右に縦長のswfを表示するページを作ろうと 思っています。 そして、swfは表示されてなくてもいいようなものとして、 ブラウザの下の横スクロールバーには、 真ん中のコンテンツの範囲内だけを移動できる横スクロールバーとしたい と思っています。 つまり真ん中のコンテンツが隠れた場合にスクロールバーが出てくるが、 swfが隠れただけでは出てこない、 そして、スクロールバーをめいっぱいスライドしても、コンテンツの端までしか いけず、swfの端まではいかない、というものです。 こういったことがJSかCSSで可能なのでしょうか？ おわかりになる方いらっしゃいましたら、 教えていただけないでしょうか？ お手数をおかけしますが、よろしくお願いします。
- daisukehi
- お礼率100% (3/3)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
スクリプトで可能だと思います。（もちろんCSS併用） ブラウザの機能にはないので、ほとんどスクロールバーの機能を自作することになると思われます。 でも、できたものを想像してみると… なんだか、ユーザビリティが悪そうな気がします。 スクロールバーが2本出てくるとうるさいので、ブラウザ本来のバーは表示させずに使うということになるのでしょうけれど、本来のものと似ていて使い勝手が違うというのが、ユーザにとってとてもストレスになると思われます。 さらには、質問者様はswfは見えなくても良いとおっしゃっていますが、見たいユーザがいても画面を拡大できない限り見ることができないのというのもストレスになるのでは？ ・・・というだけでは回答にならないので、自作するならこんなところかと。 1）スクロールバーの部品を作る 画像でも良いし、<button>などを利用してもできそう 2）スクロールバーとしてのＨＴＭＬをセット（制御はスクリプト） 3）コンテンツ部の全体幅に対し表示中の幅を計算し、全部表示されていたら バーは表示しない。一部表示の場合、バーのサム部分の幅をその割合に セットして 表示する。バーを表示する。 4)バーの位置はposition:absoluteでスクリプトで制御する（フローティング メニューのように）か、CSSで固定表示のフッターのように位置固定 5） 3及び4はintervalでチェックを入れるか（効率悪い？）、リサイズ/スク ロールなどのイベントでチェックするように設定しておく。 6）バーのサム部をドラッグ、両端のアローをクリック、ボックスをクリックなど の場合の処理を設定しておく。 （それぞれに応じて表示画面をスクロールする） ちなみに、javascriptでのスクロールバーのサンプルがあったので（↓） http://himajin.moo.jp/java/bar/scroll.html 処理内容は変わるけれど、制御は近いと思われます。 あと、ライブラリでこんなのも。内容を見ていないので、ブラウザのスクロールバーを利用しているのかどうかは不明。 http://www.kelvinluck.com/assets/jquery/jScrollPane/cap_examples.html http://www.kelvinluck.com/assets/jquery/jScrollPane/examples.html ↑の例もそうだが、バーの形状や表示を制御できるもの http://www.hesido.com/web.php?page=customscrollbar 言語が違うけど、スクロールバー自作の解説 http://blog.bonkura.jp/2008/10/as3.html
関連するQ&A
- ブラウザのスクロールバーの長さを制御
ブラウザのスクロールバーの制御をしたいのですが、 いい方法が見つかりません。 たとえば、縦の長さ800pxある画像を表示させたときに 500pxまではブラウザのスクロールバーを非表示にさせ、 500px以下になったときにはじめてスクロールバーが表示される形を再現したいです。 この時、例えばブラウザウィンドウの縦幅を480pxにした場合は 差分の20px分のみのスクロールバーが出てきてほしいのですが、 単純にjavascriptで判別させてoverflowの切り替えをしてしまうと、 800px分のスクロールバーが出てしまうのです。 ちなみに画像は背景としてではなく、あくまでも画像として配置したいと思っています。 何かいい方法があればご教授ください
- 締切済み
- CSS
- CSSでスクロールバー
CSSでdivタグにwidthとheightを指定してボックスを作ります。そして、そこにoverflow:scroll;を指定して、そのボックスにスクロールバーを表示させるのですが、下のスクロールバーを表示させないようにするにはどうすればいいんでしょうか？右横の縦方向のスクロールバーは必要ですが、表示させるもののwidthが決まっている場合、下の横方向のスクロールバーが邪魔で仕方ないんですけど。 どなたか教えて下さいませんか？？
- ベストアンサー
- HTML
- ブラウザの表示領域から高さを指定、ブラウザを動かしても可変させたい。
ブラウザの表示領域から高さを指定、ブラウザを動かしても可変させたい。 ブラウザのスクロールバーのように、 ブラウザの表示領域を取得してdivのボックスのサイズを取得して、 それに合わせてボックスの高さを指定し、 overflow:autoでスクロールバーが出るようにしたいと考えております。 サイズの取得までは.clientHeightを使ってできたのですが、 表示後にブラウザを動かすと合わせて可変するようにすることができず困っております。 上記を実現する方法がおわかりの方がいらっしゃれば、 是非ご教授いただければと思います。
- ベストアンサー
- JavaScript
- スクロールバー
現在HPを製作しています。 その過程で出た問題なのですが何かヒントになるような情報があれば教えていただければと思い、質問します。 HPの型としては、フレームを使って上下に分割されたものです。 起こった問題の現象としては ・下フレームで縦にスクロールバーが発生した時に、（おそらくスクロールバーの幅分）横スクロールバーが出現してしまいます。 ・こうして発生した横スクロールバーはブラウザの横幅を広げても消えません。 ・縦スクロールバーが消えると同時に消えます。 どうにかして縦のスクロールバーが出ても横は出ないようにしたいのですが、現在ヒントとなるものがなく闇雲に原因を探している状態です。 もしこのような現象に対してヒントのようなものをお持ちの方がいましたら。 知恵を貸していただきたいと思います。 よろしくお願いします。
- 締切済み
- HTML
- IE8の、スクロールバーについて
IE8の、スクロールバーの幅を、太くすることは可能でしょうか？ というのも、タッチパネルモニタを導入したのですが、 ブラウザのスクロールバーが右の端すぎてうまく選択できません。 スクロールバーが太くできれば、うまく選択できるようになると思うのですが、 ご教授いただけます方、よろしくお願い申し上げます。
- ベストアンサー
- ブラウザ
- スクロールバー
インラインフレームの縦スクロールバーは表示して 横スクロールバーは表示しないようにするには どうしたらよいでしょうか？ フレームの枠を中に表示するHTMLのWIDHTより大きく 設定してるんですが、どうしても横スクロールが出て しまいます。 フレーム内に表示するページの幅って設定できるんですか？ 詳しい方よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- スクロールバーを出現させる方法
目が悪いので画面を拡大してブラウザを見ることが多いのですが、ページによって下のスクロールバーが表示されない場合があります。 下のスクロールバーが表示されないとキーボードのカーソルキーで横に画面をスクロールさせないといけないのでとても面倒です。 このような場合に強制的にスクロールバーを出現させる方法があったら教えて下さい。 OSはXPでブラウザはFireFoxの最新版です。
- ベストアンサー
- Windows XP
- CSSだけで、テーブルにスクロールバーを表示させたいのですが…
CSSを使い、テーブルにスクロールバーを表示させたいのですが <div style="height:60px; width:300px; overflow-y:scroll;"> <table border=1 width=300> : </table> </div> 上記の方法だと確かにスクロールバーは表示されるのですが、出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか？ 出来れば、スクロールバーの色を変更して、横(X軸)のスクロールバーも消したいのですが… CSSで .scroll { overflow: scroll; visibility: visible; height: 100px; width: 140px; } とやってみたのですが、どうしてもスクロールバーが表示されません。何が足りないのか、もしくは根本から間違っているのかがわかりません。 ご存知の方教えて下さい。
- ベストアンサー
- HTML
- デザインされたスクロールバーについてです
いつもお世話になっています。。 デザインされたスクロールバーを使用したくて、 flexcrollというファイルをダウンロードしました。 こちらのサンプルにあるファイルが使用しているものと同じかと思います http://lifescape.seesaa.net/article/51751860.html ファイルは javascriptのflexcroll.jsと cssを2ファイルを使用しています。 こちらでページ内に色を指定したスクロールバーを設置できたのですが、 同じスクロールバーをサイズ違いで、同ページ内に2つ設置したい場合、CSSでは指定が一つしかできないので、同じ大きさのスクロールバーしか設置ができません。 javascriptを2つ用意してCSSのクラス名を変更するれば、同ページ内で2種類のスクロールーが設置できるのか？？ よくわかりません。。 どうかご教授お願い致します。
- ベストアンサー
- HTML
- インラインフレームのスクロールバーの色を変えたい
CSSのbodyタグでスクロールバーの色指定をしました。外部スタイルシートと、head内に書き込むのと二通りで試しましたが、どちらの場合もブラウザのスクロールバーは反映されるのに、インラインフレームのスクロールバーは変わりません。 インラインフレームの変え方をどなたか教えていただけないでしょうか？ ブラウザはIE6.0を使っています。
- ベストアンサー
- ホームページ作成ソフト
お礼
fujillin様 お答えいただきありがとうございます。 クライアントの要望ではありますが、 おっしゃるとおり、swfが見たくても見られないため、 ユーザビリティは悪いです。 背景的な扱いなので見れなくてもいいとのことですが・・・ 微妙ではありますよね。 自作スクロールバーだと、 違和感を感じるユーザーもいらっしゃると思いますので （ユーザビリティが悪い時点で十分違和感なのですが）、 できれば、既存のブラウザのスクロールバーを使用したいと考えています。 考えてみた方法が、 swfを表示するボックスをCSSで定義して、 widthとleftを変える関数をbodyのonloadとonresizeの度に 呼び出す方法です。 真ん中のコンテンツ部分のwidthは決まっているので、 コンテンツ部分のleftも同様に動的に変えてずらします。 軽くテストしてみたところ、これで実現できそうな気がします。 お忙しいところ、ご回答ありがとうございました。