- ベストアンサー
DIV 領域内でのオートスクロール
当方はプログラミングやJavascriptなどにはとても疎く、サンプルなどは色々あるのですが、どのように改良すれば良いのかわかりません。 HTMLでWEBのページを作成しているのですが、下記の条件があります。 ・表示領域が600×300 ・ブラウザ標準スクロールバー使用禁止 ・<iframe>使用禁止 <body> ～～～ <div style="overflow:hidden;"> ここの部分だけJavascriptでオートスクロール </div> ～～～ </body> 駄文で申し訳ないですが、どなたかご回答願います。
- onion999
- お礼率100% (3/3)
- JavaScript
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ちは（＾＾） No1の御礼のサイトもう一度みたら上が解説で下がサンプルだったんですね（＞＜） 右にスクロールバーがあったから勘違いしてました（－－；） もう一個面白いのみつけたので書きますね（＾＾） <SCRIPT language="JavaScript"> <!-- var SmoothScroll = {}; SmoothScroll = { targetScrollTop : 0, dist : 0, timer : 0, count : 0, parentid : 0, lastDist : 0, //speedStore : [], options : {}, defaultOptions : { time : 1*1000, unit : 50 }, scrollTo : function( element, parent, options ){ this.options.time = this.defaultOptions.time; this.options.unit = this.defaultOptions.unit; if( options ){ this.options.time = ( options.time ) ? options.time : this.options.time; this.options.unit = ( options.unit ) ? options.unit : this.options.unit; } clearInterval( this.timer ); this.parentid = parent; this.scrollTopMax = this.$(parent).scrollHeight - this.$(parent).offsetHeight + parseInt(this.$(parent).style.borderTopWidth) + parseInt(this.$(parent).style.borderBottomWidth); if( navigator.userAgent.match( "MSIE" ) ){ this.targetScrollTop = ( element ) ? this.$(element).offsetTop : 0; }else{ var targetOffsetTop = ( element ) ? this.$(element).offsetTop : this.$(parent).offsetTop; this.targetScrollTop = targetOffsetTop - this.$(parent).offsetTop; } this.targetScrollTop = ( this.targetScrollTop > this.scrollTopMax ) ? this.scrollTopMax : this.targetScrollTop; this.dist = this.targetScrollTop - this.$(parent).scrollTop; this.lastDist = 0; this.timer = setInterval('SmoothScroll.update()', this.options.unit ); this.count = 0; //this.speedStore = []; this.update(); }, update : function(){ var dist = this.targetScrollTop - this.$(this.parentid).scrollTop; var speed = 2 * dist * this.options.unit / ( this.options.time - this.options.unit * this.count ); //this.speedStore.push( speed ); speed = ( speed > 0 ) ? Math.ceil( speed ) : Math.floor( speed ); if( Math.abs(dist) <= Math.abs(speed) ){ // got there clearInterval( this.timer ); this.$(this.parentid).scrollTop = this.targetScrollTop; return; }else if( this.lastDist == dist ){ // stuck clearInterval( this.timer ); this.$(this.parentid).scrollTop = this.targetScrollTop; return; } var scrollTop = this.$(this.parentid).scrollTop + speed; this.$(this.parentid).scrollTop = scrollTop; this.lastDist = dist; this.count++; if( this.count == this.options.time / this.options.unit ){ // timeout clearInterval( this.timer ); this.$(this.parentid).scrollTop = this.targetScrollTop; } }, $ : function(id) { return document.getElementById(id); } } --> </script> <div id="scrolltop" style="width: 600px; height: 300px; overflow-y: hidden; border: 1px black solid;"> a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br> <span id="middle" style="color: red"><b>[i]</b><br> </span>j<br>k<br>l<br>m<br>n<br>o<br>p<br>q<br>r<br>s<br>t<br>u<br>v<br>w<br>x<br>y<br> <span id="bottom" style="color: blue"><b>[z]</b></span><br /> </div> <input type="button" value="go to top smoothly" onclick="SmoothScroll.scrollTo(0,'scrolltop');"/> <input type="button" value="go to [i] smoothly" onclick="SmoothScroll.scrollTo('middle','scrolltop');"/> <input type="button" value="go to [z] smoothly" onclick="SmoothScroll.scrollTo('bottom','scrolltop');"/> 見つけたばかりで中身まで分からないですけど・・・ ボタンを押すと<span id="">のところまで自動スクロールします <input type="button" value="go to [i] smoothly FAST" onclick="SmoothScroll.scrollTo('middle','scrolltop',{time: 500});"/> のように最後に時間指定をして速度の調整もできます(値が小さいほど速くなります)
その他の回答 (2)
- leap_day
- ベストアンサー率60% (338/561)
使用禁止の経緯がよく分からないですけど(知識不足で・・・) 一応『テーブルスクロール』という技術を発見しましたので書いておきますね（＾＾） <style type="text/css"> div { width:600px; height:300px; overflow:auto; border:1px solid black; scrollbar-face-color: #ffffff; /* 表面の色 */ scrollbar-3dlight-color: #ffffff; /* 左端と上端の色 */ scrollbar-highlight-color: #ffffff; /* ハイライトの色 */ scrollbar-shadow-color: #ffffff; /* 影の色 */ scrollbar-darkshadow-color: #ffffff; /* 右端と下端 */ scrollbar-arrow-color: #000000; /* 矢印の色 */ scrollbar-track-color: #ffffff; /* バーの背景の色 */ } td { width:100; height:200; } </style> <div> <table border=1> <tr> <td>a</td> </tr><tr> <td>a</td> </tr><tr> <td>a</td> </tr><tr> <td>a</td> </tr></table> </div> スクロールバーも白にしてるので外観的にも(?)すっきりしてるかな？ スクロールバーの表示は＊～～＊のところですので#ffffffをお好みの色に変えてください 冒頭でも述べたようにまだまだ知識不足です（＞＜） ブラウザ関係分かりませんのでIE以外での確かめかた分かりません（－－；）
お礼
ご回答ありがとうございます！！ 実は、既に試してはみたんですが、 そもそも、ブラウザ標準のスクロールバーではダメみたいです。 スクロールバーのサイズはいじれないようですし。 >使用禁止の経緯がよく分からないですけど(知識不足で・・・) 自分もわからないです。orz...
- hkd9001
- ベストアンサー率48% (99/204)
こんばんは。 ブラウザがInternet Explorer や FireFox ならば、MARQUEE タグで処理できるはず…です。
お礼
わざわざ、ご回答ありがとうございます。 大変申し訳ありませんが完全にこちらの質問ミスでございます・・・。 すいません。 ベースフレーム領域が800*600 コンテンツ領域が600*300 となります。 初めは<iframe>で別ページをコンテンツ領域に埋め込んでいたのですが、 ブラウザ標準スクロールバーは仕様上の問題(主に外観の問題でしょう)とかで使用禁止となり、代わりになるようにJavascriptでオートスクロール機能を使用しました。 参考までに（http://www.red.oit-net.jp/tatsuya/java/scrl_a.htm） しかし、<iframe>では仕様上の問題(別ページにするとセッションが切れてしまうそうです)とかでまたまた使用禁止。 <div style="overflow:overflow;">～</div>を試してみたところ、見かけは<iframe>とほぼ同じで、さらに別ページではないのでいけるかなと考えたのですが、Javascriptでのオートスクロールがうまく動かなくなってきました。愚考ですが、ウィンドウ全体に対してスクロールをかけているからなのかなと…。では、<DIV>の領域だけスクロールさせるよう改造してみようかと調べたりしたのですが、正直ちんぷんかんぷんでした。 オートスクロールに必要な機能としては、「PageUp」「Stop」「PageDwon」といったところです。 対象ブラウザはですが、最低ラインとしてIE、Firefox、Opera辺りでしょうか。 なんだか、自分で書いてて混乱してきました。 自分のいいたいことがまとめられない、ダメですね、これじゃ。 少しまとめてみます。 ・表示領域は限定されている。 ・表示したいコンテンツはそれより大きい（主に高さ）。 ・ブラウザ標準スクロールバーは表示してはならない。 ・<iframe>は使用してはならない。 ・閲覧者は任意にスクロール制御を行える。 こんなところでしょうか・・・。 何か良い知恵がありましたら、またのご回答お待ちしております。
補足
連投ですいません。 <marquee>もいじってみます。
関連するQ&A
- iframeの横スクロール
iframeを使ってほかのページを表示させているのですが、 どうしても横スクロールバーが出てしまうのでcssのbody要素に 「overflow-x: hidden;」と入れました。 確かにiframeの横スクロールバーは消えましたが、ページの横スクロールも消えてしまいました。 div idでiframeを囲ってcssでその場所だけに「overflow-x: hidden;」を入れると今度は横スクロールバーが消えません。。 色々調べてみたのですが同じような人がいないようで； 詳しい方教えていただけないでしょうか。 （説明がへたくそですみませんm(_ _)m）
- ベストアンサー
- その他([技術者向] コンピューター)
- 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>
- ベストアンサー
- CSS
- overflow:hiddenでスクロールバー
<div id="header"> <div id="main"> <div id="footer"> の構成でそれぞれにoverflow:hiddenをCSSにて記述しています。 最近 main 部分がはみ出すとブラウザにスクロールバーが 出ることに気付きました。 色々調べた結果、bodyに直接overflow:hiddenを 書けば良いことが分かりました。 ええっとそういうものなのでしょうか。ちょっと変に感じてますが。
- ベストアンサー
- CSS
- スムーズにスクロールできるスプリクトが作動しません
初めて質問させていただきます。 ページ内にスタイルシートを使ってスクロールしても動かない案内板のようなボックスを作り、その中でページの上部に戻る際、スルスルとスクロールする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
- IE7の<div>のバグ
IE7でgooglemapの表示がおかしくなります。 <div id=～>で指定した、googlemapを表示させる部分だけ、 スクロールしても左下に必ず表示されるようになってしまいます。 しかもスクロールバーの上にマップが出てくる状態になってしまっています。 親ページのcssに overflow:hidden その下に overflow:auto が設定されています。 フレームが上下に分かれていて、外枠のスクロールは表示せず、フレーム下部のスクロールだけ表示させるためです。 mapはフレーム下部に設定しているのですが、どうやら外枠のスクロールの設定に依存しているようです。 floatは使用していません。 <div id～>にposition:relativeを指定してもだめでした。 一番上位のoverflowではなく、そのひとつ下のoverflowの設定にさせたい場合はどうしたらよいのでしょうか。 他のdivタグはそのようになっています。 また、IE8、IE9でも目的の動きになっています。 IE7だけが上位を見てしまうようです。
- 締切済み
- HTML
- firefoxで見るとdiv背景画像がスクロールで消えてしまいます
http://www.geocities.jp/testac2007/ bodyに「top_bg.gif」という背景画像指定をした上で更にdivを重ね、そのdiv内に「side_860.gif」という背景画像を指定しています。 ieだと意図した通りに表示されるのですが、 FirefoxやNetscapeで確認すると、表示されているページより下部のスクロール以下の背景画像が表示されません。 何とか同症状についてネットで検索し試行錯誤してみたのですが、解決に至りませんでしたのでこちらでヘルプさせていただきました。皆さんのお知恵を拝借いただきたいです。 ■■■HTMLの概要■■■ <body> <div id="side_bg"> <div id="outline"> <div id="A01">○○○</div> <div id="A02"> <div class="A02_left">○○○</div> <div class="A02_right">○○○</div> <br class="c-both"> </div> <div id="B01">○○○</div> </div> </div> </body> ■■■CSSの概要■■■ body { margin:0px auto; background-image:url(images/top_bg.gif); } #side_bg { width:860px; height:100%; margin:0 auto; background:#ffffff url(images/side_860.gif); overflow:visible; } #outline { width:830px; margin:0 auto; background-color:#FFFFFF; } .c-both { clear:both;} #A01{ width:830px; margin:15px 0px 4px 0px; overflow: auto; } #A02{ width:830px; margin:0px 0px 4px 0px; overflow: auto; } .A02_left{ width:304px; float:left; } .A02_right{ width:526px; float:right; margin-top:4px; } #B01{ width:730px; margin:20px 50px; }
- ベストアンサー
- CSS
- ブラウザのサイズを変えたら、divのボックスの高さも合わせて
ブラウザのサイズを変えたら、divのボックスの高さも合わせて 可変できるようにしたいです。 さらに、可変したdivのボックスの高さより内容量が多い場合は ブラウザのスクロールバーのようにCSSのoverflow:autoで スクロールが表示されるようにしたいと考えております。 現時点で、スクロールバーはオリジナルの画像で作成しており、 表示させるのにjScrollPane.jsというJavaScriptを使用しています。 しかし高さが固定されており、カスタマイズしようと思っているのですが なかなかうまくいきません。 どなたか、実現方法をご教授願えますでしょうか。 よろしくお願いいたします。 ※情報不足であれば、追記いたしますのでご指摘お願いいたします。
- 締切済み
- JavaScript
- divのheight指定で画面一杯に表示したい
よろしくお願い致します。 <div>の<height>を100%に指定して、 タブレット等での表示時、縦でも横でも画面一杯に 表示させたいと考えています。 とりあえず css で以下は宣言済みです。 html, body { height: 100%; margin: 0px; padding: 0px; } 親子構造としては以下を想定しています(いくらか簡略化しています) <html> <body> <div id="H" style="height:60px;"> (1)ここにヘッダー的なもの </div> <div id="B" style="height:100%; overflow: auto;"> (2)この部分を縦一杯にしたい </div> </body> </html> (2)の部分にはjavascriptでサーバから取得した XMLのデータを埋め込んでおります。 その際、選択行の色付け等を行いたかった為、 大枠を<div>でくくり、その中に<table>で表組みしています。 最終的な構造は以下のようになっているはずです。 <div id="B" style="height:100%; overflow: auto;"> <div id="rdiv1"><table id="rtbl1"><tr><td ・・・ /td></tr></table></div> <div id="rdiv2"><table id="rtbl2"><tr><td ・・・ /td></tr></table></div> <div id="rdiv3"><table id="rtbl3"><tr><td ・・・ /td></tr></table></div> ・・・ </div> 行ごとの<div>や、その中の<table>でも height: 100%; は指定しています。 また、1行あたりの高さは<td style="height: 40px;">と指定しています。 (rowspanを使ってのぶち抜きを行っているため) html と body に height:100%; を指定しているので、 予想ではヘッダー用のdivが指定の高さで表示され、 次のdivが残りの高さ分一杯に表示。 その中のデータは overflow:auto; でスクロールできる。 と考えていたのですが、実際はjavascriptで埋め込んだdiv、 及びtableの高さまで伸びてしまい画面上を大きくはみ出してしまいます。 （divのoverflowが全く機能しません） 100%ではなく 500px としてみたところ、 そのサイズに収まってスクロールできました。 （縦一杯ではありませんがdivのoverflowは機能しました） 何とか height 100% を実現して、 divのスクロールバーのみでの表示を行いたいのですが、 何か指定が足りないのでしょうか？
- ベストアンサー
- CSS
- スクロールできない
お世話になっています。 下のようなファイルによって、フレームを使ったファイルindex2.htmlを呼び出して、HP全体を真ん中寄せにしました。 するとマウスの真ん中のちょぼでスクロールできなくなってしまいました。 <body> <DIV ALIGN="center"> <iframe name="cal-iframe" src="index2.html" width="920" height="2500" scrolling="yes" frameborder="0" marginwidth="0" marginheight="0"> </iframe> </DIV> </body> スクロールバーをドラッグアンドドロップで操作することはできるのですがちょぼで操作できるようにするには、どうすればいいでしょうか？
- ベストアンサー
- HTML
お礼
毎度、ご回答のほど深く感謝致します。 or2 ちょっと確認してみましたが、これなら何とかなりそうです。 コードを追えるとこまで追ってみます(初見では何がなんだか…)。 これでなんとか形になればなと・・・。 ご回答頂いた方々、また、参考ページの作者様 ありがとうございます。