jQueryを使い、ボッス要素を自動スクロールする方法

jQueryを使い、ボッス要素を自動スクロールし、テキストが流れているように見せる方法。

jQueryを使わないで作る方法については、「JavaScriptでボッス要素を自動スクロールする方法」のページへ。

実装例


この
ボックス
要素

自動的

最後
まで
スクロール
します。

実装例(サンプル)の動作について

ページを読み込むと、背景色が黄色のボックス要素を、自動的に最後まで縦スクロールする。最後までスクロールし終わると、最初に戻り、自動スクロールを繰り返す。

ソースコード

JavaScript

<script type="text/javascript">
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 );
    }
}
</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>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, スクロール, 逆引き パーマリンク