jQuery、または JavaScript を使って、ボックスの中の要素を自動でスクロールさせて、テキストが流れているように見せる方法を紹介します。

実装したサンプルは以下。

ボックス・スクロール：サンプル・デモ

HTML の記述サンプルは以下。

<div id="scroll-box">
<ul>
<li>テスト 1行目</li>
<li>テスト 2行目</li>
<li>テスト 3行目</li>
<li>テスト 4行目</li>
<li>テスト 5行目</li>
<li>テスト 6行目</li>
<li>テスト 7行目</li>
<li>テスト 8行目</li>
<li>テスト 9行目</li>
</ul>
</div>

CSS 側ではボックスのサイズと［overflow:hidden］を指定しておきます。

#scroll-box {
height:200px;
overflow:hidden;
overflow-y:scroll;
border:1px solid #ccc;
padding:0 20px;
}

続いてボックスをスクロールさせるためのプログラム本体。

まずは jQuery を使わずに動作する、通常の JavaScript ヴァージョンを。

<script>
window.onload = function () {
	autoScroll();
}
var $scrollY = 0;
function autoScroll() {
	var $sampleBox = document.getElementById("scroll-box");
	$sampleBox.scrollTop = ++$scrollY;
	if( $scrollY < $sampleBox.scrollHeight - $sampleBox.clientHeight ){
		setTimeout( "autoScroll()", 20 );
		}else{
			$scrollY = 0;
			$sampleBox.scrollTop = 0;
			setTimeout( "autoScroll()", 20 );
}}
&lt/script>

以下は jQuery を使用するタイプです。
こちらは本家の［jQuery.js］をあらかじめ読み込んでおくことを忘れずに。

jQuery( function() {
	autoScroll();
} );
var $scrollY = 0;
function autoScroll() {
	var $sampleBox = jQuery( '#sampleBox' );
	$sampleBox.scrollTop( ++$scrollY );
	if( $scrollY < $sampleBox[0].scrollHeight - $sampleBox[0].clientHeight ){
	setTimeout( "autoScroll()", 20 );
	}else{
	$scrollY = 0;
	$sampleBox.scrollTop( 0 );
	setTimeout( "autoScroll()", 20 );
}}

JavaScript タイプ、jQuery タイプ共にどちらも比較的簡単なコードで動作します。
ぜひ導入を検討してみてはいかがでしょうか。

ボックス・スクロール：サンプル・デモ