ボッス要素を自動スクロール

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>

HTML

<div id="sampleBox">
    <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>

スポンサード リンク

カテゴリー: JavaScript, アニメーション, スクロール, 逆引き パーマリンク