jQueryで親要素のスクロールに対応して子要素をフェードインで追加する方法

投稿日: 2013年9月8日 作成者: alphasis

jQueryでスクロール可能な親要素のスクロールに対応して子要素をフェードインで追加する方法。

実装例

項目数：10

  1. 項目1
  2. 項目2
  3. 項目3
  4. 項目4
  5. 項目5
  6. 項目6
  7. 項目7
  8. 項目8
  9. 項目9
  10. 項目10

実装例（サンプル）の動作について

背景色が黄色のボックス要素を縦スクロールすると、

  • 「項目数：」の右横に、現在のリスト項目数を表示する。
  • 現在のリストの最後の項目がボックス内に現れると、新たな項目をフェードインで１つ追加する。

ソースコード

JavaScript

<script type="text/javascript">
jQuery( function() {
    var $addItemNumber = 0;
    jQuery( '#sampleList' ).scroll( function () {
        var $lastElement;
        var $bottomPosition = this.scrollTop + this.clientHeight;
        $sampleList = jQuery( '*', this );
        $lastElement = $sampleList[$sampleList.length-1];
        var $lastElementPosition = $lastElement.offsetTop - this.offsetTop;
        if( $lastElementPosition < $bottomPosition ){
            $addItemNumber++;
            jQuery( this ).append( '<li id="addItem' + $addItemNumber + '" style="display: none;">追加項目' + $addItemNumber + '</li>' );
            jQuery( '#addItem' + $addItemNumber, this ).fadeIn( 1000 );
        }
        jQuery( '#itemCount' ).text( jQuery( '*', this ).length );
    } );
} );
</script>

使用している主なjQuery api

HTML

<p>
    項目数：<span id="itemCount">10</span>
</p>
<ol id="sampleList">
    <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>
    <li>項目10</li>
</ol>

CSS

<style>
#sampleList {
    width: 300px;
    height: 200px;
    margin: 0;
    padding: 0 10px;
    overflow: scroll;
    background-color: yellow;
    list-style-position: inside;
}
</style>

スポンサード リンク

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