実行例

下のフレームが実行結果です

リスト -フレームを表示するHTML-

リスト -下に表示するHTML-

<body onload="myScroll()">
<script type="text/javascript"></script>

 
Tatsuya's Home Page 
イヌでもわかるJavaScript講座 
この講座のサンプルを無断で使用することを禁じない 
ご意見・ご感想をお待ちしております 
このホームページは、リンクフリーです 
また、相互リンクしてくださる方は、メールをください

サンプルだけの HTMLはこちらへ

説明

今回フレームをつかったので、HTMLファイルは３つになります。
下に表示する HTML が今回のサンプルになります。

映画のエンディングのように文字が流れるのは、ただ、人間がスクロールバーで画面をスクロールさせることを、JavaScriptでしているだけです。
myY = 0;
function myScroll(){
 window.scroll( 0, myY );
 myY = myY + 2;
 if ( myY == 300 ) myY = 0;
 setTimeout( "myScroll()", 100 );
}

上記の関数を <BODY>タグの onload で呼んでいます。
<body onload="myScroll()">
※ onload は、Step.32 参照

window.scroll () これが、画面をスクロールさせます。

パラメータは、window.scroll ( X , Y ) です。
X , Y がそれぞれの座標で左上が０の開始位置です。
指定した座標へ、画面を移動させます。

今回は縦（下から上へ）にスクロールさせるので、X座標は０固定です。

あとは問題無いでしょう。
Y座標を２ずつカウントさせ、画面をその位置へ移動させます。下までいったら、また０に戻して、繰り返しです。
myY = myY + 2;

サンプルでは、最終行を300としています。
if ( myY == 300 ) myY = 0;

ループは、setTimeout で 100ミリ秒単位で動かしています。
setTimeout( "myScroll()", 100 );
※ setTimeout は、Step.28 参照

● 古臭い注意事項
IEは、<BODY>タグで、bgproperties="fixed" と指定してあげれば、壁紙は固定されてスクロールしませんが、NNはスクロールしてしまいます。
また、勝手にスクロールするので、下の表示のスクロールバーはいらないと、<FRAME>タグに SCROLLING="no" と入れたいところですが、NNが動かなくなります。

▲TOP

Q&A

[Q] スクロールしないのですが。
[A] 画面内に収まる行数（スクロールバーが出ない）では、スクロールしません。 を追加するなりして下さい。

▲TOP

【Q&A】

[Ｑ] 下まで行ったらスクロールをやめたいのですが。
[Ａ] サンプルを下のように変更して下さい。

function myScroll(){
 window.scroll( 0 , myY );
 myY = myY + 2;
 if ( myY < 300 ) setTimeout( "myScroll()", 100 ); // 下まで行ってなければループ
}

▲TOP