JavaScriptでボッス要素を自動スクロールし、テキストが流れているように見せるサンプル。
jQueryを使って作る方法については、「jQueryを使い、ボッス要素を自動スクロールする方法」のページへ。
実装例（サンプル）
この
ボックス
要素
を
自動的
に
最後
まで
スクロール
します。
実装例（サンプル）の動作について
ページを読み込むと、背景色が黄色のボックス要素を、自動的に最後まで縦スクロールする。最後までスクロールし終わると、最初に戻り、自動スクロールを繰り返す。
ソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
autoScroll();
}
var $scrollY = 0;
function autoScroll() {
var $sampleBox = document.getElementById( "sampleBox" );
$sampleBox.scrollTop = ++$scrollY;
if( $scrollY < $sampleBox.scrollHeight - $sampleBox.clientHeight ){
setTimeout( "autoScroll()", 20 );
}else{
$scrollY = 0;
$sampleBox.scrollTop = 0;
setTimeout( "autoScroll()", 20 );
}
}
</script>
window.onload = function () {
autoScroll();
}
var $scrollY = 0;
function autoScroll() {
var $sampleBox = document.getElementById( "sampleBox" );
$sampleBox.scrollTop = ++$scrollY;
if( $scrollY < $sampleBox.scrollHeight - $sampleBox.clientHeight ){
setTimeout( "autoScroll()", 20 );
}else{
$scrollY = 0;
$sampleBox.scrollTop = 0;
setTimeout( "autoScroll()", 20 );
}
}
</script>
HTML
<div id="sampleBox">
<p id="sampleText">
<br />この<br />ボックス<br />要素<br />を<br />自動的<br />に<br />最後<br />まで<br />スクロール<br />します。
</p>
</div>
<p id="sampleText">
<br />この<br />ボックス<br />要素<br />を<br />自動的<br />に<br />最後<br />まで<br />スクロール<br />します。
</p>
</div>
CSS
<style>
#sampleBox {
width: 300px;
height: 300px;
overflow: hidden;
background-color: yellow;
text-align: center;
line-height: 1.5em;
font-size: 16px;
border: 1px solid gray;
border-radius: 10px;
}
#sampleText {
margin: 300px 0;
}
</style>
#sampleBox {
width: 300px;
height: 300px;
overflow: hidden;
background-color: yellow;
text-align: center;
line-height: 1.5em;
font-size: 16px;
border: 1px solid gray;
border-radius: 10px;
}
#sampleText {
margin: 300px 0;
}
</style>