親要素のスクロールに対応して子要素を追加

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

JavaScriptでスクロール可能な親要素のスクロールに対応して子要素を追加するサンプル。

jQueryを使って作る方法については、「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">
var $lastElement;
var $addItemNumber = 0;
window.onload = function () {
    document.getElementById( "sampleList" ).onscroll = function(){
        addTheElementsInResponseToScroll( this );
    };
}
function addTheElementsInResponseToScroll( $event ) {
    var $bottomPosition = $event.scrollTop + $event.clientHeight;
    $sampleList = document.getElementById( "sampleList" ).children;
    $lastElement = $sampleList[$sampleList.length-1];
    var $lastElementPosition = $lastElement.offsetTop - $event.offsetTop;
    if( $lastElementPosition < $bottomPosition ){
        var $newItem = document.createElement( 'li' );
        $newItem.innerHTML = "追加項目" + ++$addItemNumber;
        $event.appendChild( $newItem );
    }
    document.getElementById( "itemCount" ).innerHTML = $sampleList.length;
}
</script>

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>

スポンサード リンク

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