CSSのoverflowを使ってのスクロールについて
- CSSのoverflowを使用してページの一部をスクロールさせる方法についての質問です。具体的には、div要素をスクロールさせたいが、一番下までスクロールできないという問題が発生しています。
- HTMLのソースコードを提供しましたが、overflowプロパティをautoに設定しているにもかかわらず、スクロールができません。解決策をお教えください。
- スクロールさせたい要素にheightプロパティを設定し、overflowプロパティをautoにすることで、スクロールが可能になります。しかし、提供されたHTMLのソースコードでは、一番下までスクロールすることができません。改善方法をご指示ください。
- ベストアンサー
overflowを使ってのスクロール
CSSのoverflowを使って、ページの一部をスクロールさせたいのですが 完全に下までスクロールができません。 具体的には以下のソースの"div2"をスクロールさせたく、overflowのauto を使っているのですが、一番下までスクロールができません。 どのようにしたらよいか、ご指摘お願いいたします。 HTMLのソースは以下の通りです。 このままコピペしてもらえば動作を確認してもらえると思います。 どうかよろしくお願いいたします。 <html> <head> <style type="text/css"> body { overflow: hidden; } div { border: 1px solid black; } #div2 { height: 100%; overflow: auto; } </style> </head> <body> <div id="div1"></div><br> <div id="div2"></div> </body> <script type="text/javascript"> var text = ""; for (var i=0; i<10; i++) text += "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>"; document.getElementById('div1').innerHTML = text; for (var i=0; i<150; i++) text += "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>"; document.getElementById('div2').innerHTML = 'BEGIN<br>' + text + 'END'; </script> </html>
- hama222
- お礼率45% (106/233)
- CSS
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
body { overflow: hidden; } を外せばブラウザにもスクロールバーが出るので、そのスクロールとdiv2のスクロールを合わせればENDまで見る事が出来ますよ。 スクロールが二つになって扱いづらいですが、div2にheight:100%;を入れている限りは必ずブラウザからはみ出す部分が出てくるのでその方法しかないです。 div2の高さを「ブラウザの高さ - div1 - 隙間」という数値に設定したいなら、隙間はブラウザの初期値を全部消した上で<br>を使わずピクセルで指定し、javascriptでdiv1の高さを取得した上で100%からマイナスするといいでしょう。
その他の回答 (2)
- askaaska
- ベストアンサー率35% (1455/4149)
height:100%をはずすんじゃなくて 100%じゃなくせばいいの ブラウザ表示域の高さをdiv1の高さを取得して 差を指定してあげればいいわ jQuery使えば結構楽だけど 使わなくても出来なくないわ
お礼
ありがとうございました。 最初の回答の時、意味がつかめませんできたが、この回答で理解できました。
- askaaska
- ベストアンサー率35% (1455/4149)
height: 100%; のせいで div2の高さがウィンドウからはみ出しているのが原因ね
補足
回答ありがとうございました。 でもheight: 100%を外すと、div2のスクロールができなくなります。 div1は固定で、div2のみスクロールできるようにしたいのです。
関連するQ&A
- divのoverflowのスクロールバーを自動スクロールしたい
初めて質問します。 overflowのスタイル設定をしたdivに、innerHTMLで上から下にどんどん文字を 追加していくのですが、下にはスクロールされず、つまり自動スクロールされず わざわざ下にスクロール必要があります。 このdivのoverflowのスクロールバーを自動スクロールしたいのですが、 可能でしょうか？参考になる文献などがございましたら、教えてください。 msg.innerHTML=msg.innerHTML+"<font size=-1>テスト</font><br>"; これを入力するごとに繰り返しています。 divのoverflow以外にいい方法があれば、教えてください。 今はmsg.innerHTML="<font size=-1>テスト</font><br>"+msg.innerHTML; で、つまり下から上に表示して無理矢理、表示させています。 どうぞ宜しくお願い致します。
- 締切済み
- JavaScript
- スムーズにスクロールできるスプリクトが作動しません
初めて質問させていただきます。 ページ内にスタイルシートを使ってスクロールしても動かない案内板のようなボックスを作り、その中でページの上部に戻る際、スルスルとスクロールするjavascriptを入れたいのですが、うまく作動しません。 <script type="text/javascript" src="○○.js" charset="utf-8"></script> <STYLE type="text/css"> <!-- html{ height:100%; overflow:hidden; } body{ height:100%; margin:0px auto; } #sub{ width:100px; position:absolute; bottom: 0px; right: 0px; z-index:100; } div#main{ width:100%; height:100%; overflow:auto; } --> </STYLE> </HEAD> <BODY> <DIV id="sub"><A href="○○">あいうえお</A><BR><A href="○○">かきくけこ</A><BR><a href="#top">上へ</A></DIV> <DIV id="main"> <A name="top"></A><BR> ・・・略 </div> </body> 普通のbody内でリンクを指定すると、問題なくスプリクトが作動します。 なぜ、div内では作動しないのでしょうか？ いろいろ調べてみましたが、どうしても分からず、こうして質問させていただきました。 原因がわかる方がいらっしゃいましたら、どうか教えてくださいますようお願いいたします。
- ベストアンサー
- JavaScript
- JavaScript表示切替の問題
ボタンを押すたびに、こんにちはとこんばんはが切り替わるようにしたいのですが、 切り替わりません。なぜかわかる方がいたら教えて頂けると助かります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="1">こんにちは</div> <input type="button" value="切替" onclick="func_switch()"> <script language="javascript" type="text/javascript"> function func_switch(){ if(document.getElementById(1).innerHTML="こんにちは"){ document.getElementById(1).innerHTML="こんばんは"; } else{ document.getElementById(1).innerHTML="こんばんは"; } } </script> </body> </html>
- ベストアンサー
- JavaScript
- セレクトメニューに応じたdivタグの内容
javascriptの質問です。フォーム内のセレクトメニューに応じて表示する配列を選び、複数のdivタグ内に表示したいと思っています。getElementByIdでセレクトメニューにIdをつけて呼び出し、selectedIndexでfunction()をonloadという事ですすめています。 複数のdivタグ内に書き出すのにinnerHTMLを使うんだなというところまでは理解しているつもりですが、上手く動きませんので、どなたかご存知の方にご教授願えればと思います。 <html> <head> <script type="text/javascript"> window.onLoad = function(){ document.getElementById("selected").onChange = function(){ var planTitle = this.selectedIndex; var object = document.getElementById("derection"); var TextData = [[],["text","text"],["text","text"]]; for (var i=0; i<TextData[planTitle].length; i++){ document.write(TextData[i]); } } } </script> </head> <body> <form action=""> <select id="selected"> <option value="title01">title01</option> <option value="title02">title02</option> <option value="title03">title03</option> </select> <div id="direction"></div> <div id="direction"></div> </form> </body> </html>
- ベストアンサー
- JavaScript
- innerHTMLを使ってID要素の内容を変えたい
innerHTMLを使ってID要素の内容を変えたいのですが、 下記のような使い方はできないのでしょうか？ var changeTEXT = document.all("hoge2").innerHTML; できない場合、これに変わるようなものがありましたら教えていただけたら、うれしいです。 よろしくお願いします。 <html> <head> <script language="JavaScript" type="text/javascript"> <!-- var changeTEXT = document.all("hoge2").innerHTML; function change1_ID(){ if(document.all){ document.all("hoge1").innerHTML = changeTEXT } if(document.getElementById){ document.getElemntById("hoge1").innerHTML = text1 } } //--> </script> <style type="text/css"> <!-- #hoge1 { margin: 0px; padding: 0px; height: 600px; width: 600px; } #hoge2 { margin: 0px; padding: 0px; height: 600px; width: 600px; } --> </style> </head> <body> <div id="hoge1" onclick="change_ID()"> ここの内容を変えたい</div> <div id="hoge2"> ここに入力されたHTMLの内容をhoge1の内容にしたい</div> </body> </html>
- ベストアンサー
- JavaScript
- 入力された文字列からリンクタグを生成
お世話になります。 ブラウザから、一行テキストに入力された文字列を使用してリンクタグを生成する挙動を構築していますが、肝心のリンクタグ（ aタグ等 ）が反映されずに悩んでいます。 普段PHPでプログラミングを行っていますので、一旦PHPで変数に置き換えたり、データベースを介したり様々な方法を試みましたが、中々うまくいかずにいます。 -- 【 JavaSの定義箇所 】 ------------- <script type="text/javascript"> <!-- function textcopy(){ var text1 = document.getElementById("text1").value; document.getElementById("text1").value = ""; text1 = document.getElementById("insert1").innerHTML + text1; document.getElementById("insert1").innerHTML = "<div>" + text1 + "</div>"; var text2 = document.getElementById("text2").value; document.getElementById("text2").value = ""; text2 = document.getElementById("insert2").innerHTML + text2; document.getElementById("insert2").innerHTML = "<div>" + text2 + "</div>"; var text3 = document.getElementById("text3").value; document.getElementById("text3").value = ""; text3 = document.getElementById("insert3").innerHTML + text3; document.getElementById("insert3").innerHTML = "<div>" + text3 + "</div>"; var text4 = document.getElementById("text4").value; document.getElementById("text4").value = ""; text4 = document.getElementById("insert4").innerHTML + text4; document.getElementById("insert4").innerHTML = "<div>" + text4 + "</div>"; var text5 = document.getElementById("text5").value; document.getElementById("text5").value = ""; text5 = document.getElementById("insert5").innerHTML + text5; document.getElementById("insert5").innerHTML = "<div>" + text5 + "</div>"; } //--> </script> -- 【 form部品の箇所 】 -------------- <form> <input type="text" id="text1" value="<a href='"> <input type="text" id="text2"> <input type="text" id="text3" value="'>"> <input type="text" id="text4"> <input type="text" id="text5" value="</a>"> <br /> <div id="insert1" style="display: inline-block;"></div> <div id="insert2" style="display: inline-block;"></div> <div id="insert3" style="display: inline-block;"></div> <div id="insert4" style="display: inline-block;"></div> <div id="insert5" style="display: inline-block;"></div> <button type="button" onclick="textcopy()">submitする</button> </form> ------------------------------- 例えば、 【 <a href='http://www.hoge.com'>テスト</a> 】の様に返したいのに、 【 http://www.hoge.com'>テスト 】と返ります。 HTMLタグは特殊文字に変換してみましたが、結果は同じでした。 因みにこの挙動がうまくいったら、type属性はhiddenにして隠し要素にするつもりでした。 恐らくこの様な面倒くさい構文より簡単な書き方があるかと思いますが、 今までJavaScript自体殆どタッチしていませんでしたので、調べながら 自分で構築してみました。 ご教示の程、どうぞよろしくお願い申し上げます。
- ベストアンサー
- JavaScript
- javascriptで困っています
スマホでタッチした場所の座標を取得しようとしているのですが、いろいろ調べて以下のように作ってみましたが、座標が取得できません。どこを直せばいいのか、教えていただきたく投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320, user-scalable=no" /> <script type="text/javascript" charset="utf-8"> var touch_box = document.getElementById("box"); touch_box.addEventListener("touchstart", function(e){ document.getElementById("txt0").innerHTML = "スタート"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchmove", function(e){ document.getElementById("txt0").innerHTML = "ムーブ"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchend", function(e){ document.getElementById("txt0").innerHTML = "エンド"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); </script> </head> <body> <div id="box"> <span id="txt0"></span><br /> X:<span id="txt1"></span>, Y:<span id="txt2"></span><br /> </div> </body> </html>
- ベストアンサー
- JavaScript
- overflow:hiddenでスクロールバー
<div id="header"> <div id="main"> <div id="footer"> の構成でそれぞれにoverflow:hiddenをCSSにて記述しています。 最近 main 部分がはみ出すとブラウザにスクロールバーが 出ることに気付きました。 色々調べた結果、bodyに直接overflow:hiddenを 書けば良いことが分かりました。 ええっとそういうものなのでしょうか。ちょっと変に感じてますが。
- ベストアンサー
- CSS
- css javascriptについて教えて下さい。
下記のように、ボタンを押すとdivタグの中にpタグを表示するようにしました。 そこで、そのpタグがdivタグの中央から表示するようにしたいのですが、できません。cssでpタグの左右のmarginをautoにするのかくらいしか思いつかず困っています。pタグがdivタグの中央から表示されるようにするにはどうしたらよいでしょうか。教えて下さい。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <style> #w{ width:500px; height:50px; border : solid 1px; overflow: hidden; } p{ display:inline-block; width:50px; height:50px; margin-left:auto; margin-right:auto; } </style> <script type="text/javascript" language="javascript"> var count = 0; var box; window.onload = function() { box = document.getElementById("w"); } function btnClick(){ var pNode = document.createElement("p"); pNode.innerHTML = count; box.appendChild(pNode); count ++; } </script> </head> <body> <div id="w"></div> <button onClick="btnClick()">Ｐタグを生成</button> </body> </html>
- ベストアンサー
- HTML
- innerHTMLにて設定した情報を再度取得する事は可能でしょうか？
innerHTMLにて指定idタグ情報を変更する事は出来るのですが、innerHTMLにて設定した情報を再度取得する事は可能でしょうか？ 下記のコードを考えてみたのですが、 再取得出来ません。 環境はXPでIE6とFF3です。 ご教授よろしくお願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <title>DOM情報の再取得</title> <script type="text/javascript" language="JavaScript"> <!-- function setText1(data) { document.getElementById("test1").innerHTML = data; return false; } function setText2(data) { document.getElementById("test2").innerHTML = data; return false; } function setText3(data) { document.getElementById("test3").innerHTML = data; return false; } //--> </script> </head> <body> <div id="test1"></div> <div id="test2"> </div> <div id="test3">テスト3</div> <br> <a href="javascript:void(0);" onClick="setText1('セットテスト1'); return false;">1</a> <a href="javascript:void(0);" onClick="setText2('セットテスト2'); return false;">2</a> <a href="javascript:void(0);" onClick="setText3('セットテスト3'); return false;">3</a> <script type="text/javascript" language="JavaScript"> <!-- document.write("<br><br>\n"+'再取得'+"<br><br>\n"); //document.write("js_test1="+document.getElementById("test1").childNodes[0].nodeValue+"<br>\n");//エラーになるのでコメントアウト document.write("js_test2="+document.getElementById("test2").childNodes[0].nodeValue+"<br>\n"); document.write("js_test3="+document.getElementById("test3").childNodes[0].nodeValue+"<br>\n"); //--> </script> </body> </html>
- ベストアンサー
- JavaScript
お礼
ありがとうございました。 教えていただいた計算をしまして、できました。