- ベストアンサー
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>もいじってみます。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
毎度、ご回答のほど深く感謝致します。 or2 ちょっと確認してみましたが、これなら何とかなりそうです。 コードを追えるとこまで追ってみます(初見では何がなんだか…)。 これでなんとか形になればなと・・・。 ご回答頂いた方々、また、参考ページの作者様 ありがとうございます。