Web画面のボックス内スクロール位置の指定方法
- HTMLでのWeb画面内にベース画面の上にポップアップのような形で、擬似ウィンドウがあります。
- 擬似ウィンドウ内のコンテンツは、ボタンを押すことで表示され、スクロールバーを動かしたい時はボックスAの位置を調整します。
- JSでJQueryを使用して、ボタンを押したらボックスAのscrollTopにコンテンツの位置を入れる処理を行いますが、微妙なずれが生じることがあります。対応策はまだ見つかっていません。
- ベストアンサー
ボックス内スクロール位置の指定
Web画面の質問です。 HTMLでのWeb画面内にベース画面の上にポップアップのような形で、position: absolute; で描画された擬似的なウィンドウがあり、 その擬似ウィンドウ内にはナビゲーション（メニューボタン）とそれに付随するコンテンツがあります。 ※以下、擬似ウィンドウ（ポップアップ）内の大まかな構成図 [ボタン1] [ボタン2] [ボタン3] [ボタン4] ┏━━━━━┓ ┃コンテンツ１┃ ┃コンテンツ２┃←heightが固定値のdivボックス（overflow: auto; でスクロールバー発生） ┃コンテンツ３┃ 仮にボックスAとする ┃コンテンツ４┃ ┗━━━━━┛ ボタン１を押すと、それに対応したコンテンツ１へ。ボタン２を押すとコンテンツ２へ、ページ内遷移のような構造にしたく、 ただし単純に各ボタンのアンカー先をコンテンツのid名のような形でページ内遷移を作ると、画面全体が動いてしまいますので、 ベースは動かさず、コンテンツを包含している「ボックスA」のスクロールバーのみを動かしたく思います。 JS側で（JQuery使用）、ボタン１を押したらボックスA.scrollTopにコンテンツ１.position().topの値を入れて処理しようと思ったのですが、スクロールバーが微妙にずれてしまいます。（綺麗にコンテンツ１の上端にスクロールしない） 恐らく親のボックスがposition:absoluteでやってるので計算がずれてる？とかも考えたのですが、対応策がよくわからないため、皆様のお知恵をお借りしたく書き込ませていただきました。 分かるかたいらっしゃいましたらご助言お願い致します。
- pikarin774
- お礼率93% (31/33)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
jqueryのoffset計算がよくわからなかったので、素で作ってみました。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1");</script> <script type="text/javascript"> <!-- $(function(){ $("#navi input").click(function(){ var box = $("#box"); var target = $("#" + $(this).attr("value")); $(box).scrollTop(getOffset(target) - getOffset(box)); }); function getOffset(elm){ var e = elm.get(0); var top = e.offsetTop; e = e.offsetParent; while(e){ top += e.offsetTop; e = e.offsetParent; } return top; } }); //--> </script> <body> <div style="position:absolute; left:200px; top:200px;"> <div id="navi"> <input type="button" value="test1"> <input type="button" value="test2"> <input type="button" value="test3"> </div> <div id="box" style="width:300px; height:300px; overflow:auto;"> <div id="test1" style="height:400px; background-color:#fee;"> test1 </div> <div id="test2" style="height:600px; background-color:#efe;"> test2 </div> <div id="test3" style="height:300px; background-color:#eef;"> test3 </div> </div> </div> </body> </html>
関連するQ&A
- JAVA コンボボックスのスクロールバーの幅
JAVAのコンボボックスをクリックすると ポップアップメニューがでてきて、 アイテム数が多いと、垂直スクロールバーが表示されます。 このスクロールバーの幅が狭いので ひろげたいのですが、方法を教えて頂けないでしょうか？ よろしくお願いいたします。
- ベストアンサー
- Java
- Firefox3.5.2で常時スクロールバーを表示する方法
今までWEBページを作成していて、 画面遷移時のスクロールバーによる画面のガタつきを防ぐために、 html { overflow-y:scroll; } としていたのですが、Firefox3.5.2ではスクロールバーが 表示されなくなってしまいました。 どなたか、Firefox3.5.2で常時スクロールバーを表示する方法を ご存知でしたら教えていただけないでしょうか？
- 締切済み
- HTML
- ポップアップウィンドウをスクロールできるようにする方法
Dreamweaver8を使用しています。 ポップアップウィンドウに表示されるデータがウィンドウ画面より長いので、スクロールして最後まで読む必要があるのですが、スクロールができません。 スクロールバーも出ません。 どうすればポップアップ画面をスクロールできるようになるか教えて下さい。 ちなみに、下記のようになっています。画像をクリックするとポップアップ画面が出現するようになっています。 <ul class="specification"><li class="specification01"><a href="toroidalcoil.html" onClick="Open_popup1();" target="popup_win01"><img src="img/toroidalcoil.gif" alt="トロイダルコイル" width="128" border="0"></a></li></ul> 出現するポップアップウィンドウのサイズ（幅）も指定できる方法があれば教えて頂けると助かります。 宜しくお願いします！
- ベストアンサー
- ホームページ作成ソフト
- ＷＥＢ上で編集できない、スクロールがあるテキストボックスの作り方を教え
ＷＥＢ上で編集できない、スクロールがあるテキストボックスの作り方を教えてください。 ＨＴＭＬで、「スクロールバーがあるボックスの中に文章をいれる」 やり方を 調べているのですが よくわかりません。 <textarea>～</textarea> で 中に文章をいれてつくってみたのですが ＷＥＢ上にアップしたあと、その文章は 別の人でも編集できるようです。 私が作りたいのは、よくＨＰなどの更新情報や使用承諾書などで 使われているような スクロールボックスの中に文章は 表示されている だけのものです。 いろいろ調べたのですが、よくわからず困ってます。 仕事の締め切りもしまっており、これ以上 調べるつずけるのも苦しく断念しました。 すいませんが 教えていただけないでしょうか？
- ベストアンサー
- HTML
- マウスのスクロールボタンで画面上で下に動かない
Alps pointing device driver version:7.0.402.3 PC: FMV-Biblo NF60T WindowsXP 数日前からマウスが画面上（ウィンドウ内）でスクロールボタンを使って下にスクロールできません。上には動きます。画面の一番右にある上下に動かせるバーをポイントして、下には動かせます。あと一旦その右横のバーで一番下に下げてからだと、マウスのスクロールボタンでもウインドウ内（画面上）で上に動きます。しかし又下に下げようとしてもマウスのスクロールボタンでは出来ません（右横のバーの位置がもし丁度真ん中なら、そこからトップまではウィンドウ内（画面上）でスクロールボタンで上に動く）。 どうしたら直せるか、可能性があれば教えていただけますか？
- 締切済み
- マウス・キーボード
- スタイルシートでスクロールは可能ですか？
以下のように、フッターを下部に固定し上部をスクロールするようにしました。スクロールバーは出て(IE6.0)フッターとの重なりは阻止されますが、スクロールバーの操作はできません。 ＜scroll=内容を切り抜く＞ということから当然のことなのでしょうか？ <!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Test</TITLE> <STYLE type="text/css"> #left { position:absolute; top: 130px; left: 100px; width: 300px; overflow: scroll; } #main { position:absolute; top: 130px; left: 400px; } #right { position:absolute; top: 130px; left: 700px; } #footer { position:absolute; bottom: 0px; left: 100px; } </STYLE> </HEAD> <BODY> <div id="left"> left<br/> <br/> left<br/> </div> <div id="main"> main </div> <div id="right"> right </div> <div id="footer"> footer </div> </BODY> </HTML>
- ベストアンサー
- ホームページ作成ソフト
- マウスのホイールやスクロールバーによるスクロールができません…
マウスのホイールやスクロールバーによるスクロールができません… どうしてなのか理由はわからないのですが、突然画面のスクロールができなくなってしまいました。 キーボードの矢印キーを押せばスクロールができるのですが、マウスのホイールを回しても、ウィンドウ右のスクロールバーをドラッグしても画面がスクロールしません。 スクロールバーの上下にある小さな三角マーク（▼と▲）のボタンも試してみたのですが、長押しによる複数行のスクロールはできないようです（何度もクリックをすれば複数行スクロールできます）。 マウスは「Microsoft Wireless Laser Mouse 6000 v2.0」を使用していますが、クリック（左右）やマウス横のボタン（２個）はちゃんと作用するようです。 このような場合、何に異常があると考えられますか。また、対処法があれば教えてください。 回答宜しくお願いします。 補足が必要ならすぐに書き添えます。
- ベストアンサー
- その他(PCパーツ・周辺機器)
- CSSでコンボボックスのスクロールバーを変更
現在、HTML+jQueryでタブレット向けのWebサイトを作成しています。 コンボボックスがあるのですが、スクロールバーが細くて手では選択しにくい為、 CSSでスクロールバーを太く変更できないかと考えています。 色々と検索しているのですが、良いサンプルなどが見当たりません。 何か参考になるサンプルなどがあれば教えていただきたいと思っています。 どうぞよろしくお願いいたします。
- 締切済み
- CSS
- スクロールできない(画面右にスクロールバーがない)ウインドウの表示
スクロールできない(画面右にスクロールバーがない)ウインドウの表示 画面の小さなＰＣで、上記のようなウインドウの全体を表示させることは可能でしょうか あるＷｅｂメールの設定画面なのですが、最下部にあるであろう設定を完了させる類のボタンが表示されず困っております ●ウインドウサイズは固定されているのか、上下・左右ともに縮小(拡大も)できません ●全画面表示でもウインドウ全体の表示には至りませんでした(まあこれは今回表示されたとしても根本的な解決にはなりませんが) 何かしらの設定で全体が見られるようにできませんでしょうか？ ご教授お願いします
- ベストアンサー
- ネットトラブル
- スクロールマウスのスクロールボタン制御
こんにちわ。 ご存知の方がいらっしゃいましたら、ぜひ教えてください。 現在、WEBページでスクロール制限をかけています。 スクロールバーが存在しないので、基本的にスクロールマウスのスクロールボタンをゴロゴロやっても下にスクロールしないのですが、スクロールボタンを押してしまうと、スクロールしてしまいます。 これを制御する（使えなくする）ことはできるのでしょうか？
- ベストアンサー
- JavaScript
お礼
お返事遅れまして申し訳ございません。 上記ソースを試したところ、こちらの意図した通りの挙動でした！ ありがとうございました！