JavaScriptでボッス要素を自動横スクロールし、テキストが流れているように見せるサンプル。
実装例
このボックス要素を自動的に最後までスクロールします。
実装例（サンプル）の動作について
ページを読み込むと、背景色が黄色のボックス要素を、自動的に最後まで横スクロールする。最後までスクロールし終わると、最初に戻り、自動スクロールを繰り返す。
ソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
autoScroll();
}
var $scrollX = 0;
function autoScroll() {
var $sampleBox = document.getElementById( "sampleBox" );
$sampleBox.scrollLeft = ++$scrollX;
if( $scrollX < $sampleBox.scrollWidth - $sampleBox.clientWidth ){
setTimeout( "autoScroll()", 20 );
}else{
$scrollX = 0;
$sampleBox.scrollLeft = 0;
setTimeout( "autoScroll()", 20 );
}
}
</script>
window.onload = function () {
autoScroll();
}
var $scrollX = 0;
function autoScroll() {
var $sampleBox = document.getElementById( "sampleBox" );
$sampleBox.scrollLeft = ++$scrollX;
if( $scrollX < $sampleBox.scrollWidth - $sampleBox.clientWidth ){
setTimeout( "autoScroll()", 20 );
}else{
$scrollX = 0;
$sampleBox.scrollLeft = 0;
setTimeout( "autoScroll()", 20 );
}
}
</script>
HTML
<div id="sampleBox">
<p id="sampleText">
このボックス要素を自動的に最後までスクロールします。
</p>
</div>
<p id="sampleText">
このボックス要素を自動的に最後までスクロールします。
</p>
</div>
CSS
<style>
#sampleBox {
width: 300px;
overflow: hidden;
background-color: yellow;
text-align: center;
line-height: 1.5em;
font-size: 16px;
border: 1px solid gray;
border-radius: 10px;
}
#sampleText {
white-space: nowrap;
margin: 0 0 0 300px !important;
width: 700px;
text-align: left;
}
</style>
#sampleBox {
width: 300px;
overflow: hidden;
background-color: yellow;
text-align: center;
line-height: 1.5em;
font-size: 16px;
border: 1px solid gray;
border-radius: 10px;
}
#sampleText {
white-space: nowrap;
margin: 0 0 0 300px !important;
width: 700px;
text-align: left;
}
</style>
スクロールで流す文字を増やした場合は、「#sampleText」の「width: 700px;」を調整し、幅を増やす必要がある。