- ベストアンサー
div inboxにて囲まれた場所を自動スクロールする方法
- div inboxにて囲まれた場所を自動スクロールする方法についてご質問です。
- 要件を満たすために、CSSとJavaScriptを使用して自動スクロールを実装することができます。
- また、div inbox内の情報は検索ロボットに拾われる可能性があるため、注意が必要です。
- morinokoe
- お礼率13% (23/165)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css"> <!-- div.infobox { font-size: 80%; text-align: left; padding: 3px; width: 200px; height: 200px; overflow: auto; border:1px solid #aaa; scrollbar-face-color: red; } --> </style> <script language="javascript"><!-- function xScrollInbox(){ i+=1; document.getElementById("pos").style.top=i; pos.focus(); if(i>stoppt){ clearInterval(si); } } function xStart(){ i=0; document.getElementById("inbox").offsetTop; stoppt=document.getElementById("stop").offsetTop; si=setInterval("xScrollInbox()",10); } onload=xStart; --> </script></head> <body> <div class="infobox" id="inbox"> <div id="pos" style="position:absolute;left:0px;"> </div> <ul> <li>あいうえお <li>かきくけこ </ul> <div id="stop" style="font-size:1px;"> </div> </div> </body> </html> 上のようにすれば自動スクロールできます。強引な方法なのでIEでしか動きません。 「xStart()」関数の最初の行にある i=0; はデフォルトのスクロール処理フィールドのY座標です。高さが200pxのフィールドの場合、「i=200;」で読み込みと同時に即スクロールを開始します。 <div id="pos" style="position:absolute;left:0px;"> </div> を <div id="pos" style="position:absolute;left:0px;">■</div> にして実行すればどういうことか分かると思います。 フィールド内の内容は検索ロボットに拾われるはずです。 インラインフレームとは違い、同一ドキュメント内にありますし、別に怪しいモノではありませんから。
補足
早速試してみました。 回答ありがとうございます。 しかし、infobox内のスクロールが少ししか動きません。 動作として、サイトのページ全体が少しスクロールし、その後、infobox内の部分が少しスクロールされます。 また、スクロール速度は調整できるのでしょうか？ お手数ですが教えて頂けないでしょうか？ よろしくお願い致します。