ncmbのデータをons-lazy-repeatでリスト生成後、最下までスクロールした後に新しいリストを追加する方法

実現させたい事

リストをons-lazy-repeatで最初にデータを10表示させる。
一番下までスクロールした時、次のデータを10件ons-lazy-repeatでリストの一番下に追加する（合計20件のデータが表示されている状態）

概要

使用プラットフォーム：Monaca
テンプレート：OnsenUI V2 JS Tabbar

該当のソースコード

html
1<ul class="list" id="list01">
2  <ons-lazy-repeat id="infinite-list" class="infinite-list"></ons-lazy-repeat>
3</ul>

javascript
1let ncmb;
2const appKey        = "xxxxxxxxxxxxxx";
3const clientKey     = "xxxxxxxxxxxxxxx";
4
5//ncmb: チャンネルクラス
6let ThreadClass;
7//ncmb:コメントクラス
8let CommentClass;
9//ncmb:ブックマーククラス
10let BookmarkClass;
11
12var limit = 10;
13
14document.addEventListener("init",async function(event){
15  if(event.target.matches("#first-page")){
16
17    //NCMB ニフティクラウド初期化設定code
18    ncmb = new NCMB(appKey, clientKey);
19    CommentClass = ncmb.DataStore("Comment");
20
21    //コメントクラスのデータ
22    var comment_result = await CommentClass.count().limit(10).fetchAll();
23
24
25    //無限リスト表示
26    infinite_load(comment_result, limit);
27
28    //スクロール処理
29    var page_content = document.querySelector("#first-page .page__content");
30        page_content.addEventListener('scroll',async function(){
31      //一番下までスクロールした場合
32      if(page_content.scrollHeight <= page_content.clientHeight + page_content.scrollTop ){
33
34        //次のコメントクラスのデータ
35        var comment_result02 = await CommentClass.count().skip(10).limit(10).fetchAll();
36        /**
37         * スクロールした際の処理
38         * ここの記述が分からない
39         */
40
41      }
42    });
43
44  }
45});
46
47//無限リスト処理
48function infinite_load(comment_result, limit){
49  var infiniteList = document.getElementById('infinite-list');
50  let list_code;
51
52    infiniteList.delegate = {
53      createItemContent: function(i) {
54
55        //コメントに画像があった時
56        if(comment_result[i].Image == undefined){
57
58          list_code = ons.createElement(
59            '<li class="list-item">' +
60              '<div class="list-item__center">' +  
61                comment_result[i].Comment + 
62              '</div>' + 
63            '</li>'
64          );
65        //コメントに画像が無い時
66        } else {
67          
68          list_code = ons.createElement(
69            '<ons-list-item>' + 
70              comment_result[i].Comment + 
71              '<img src="' + comment_result[i].Image + '">' + 
72                '</ons-list-item>'
73          );
74        }
75        return list_code;
76        
77      },
78      countItems: function() {
79        return limit;
80      }
81    };
82
83    infiniteList.refresh();

試した事

let ncmb;
const appKey        = "xxxx";
const clientKey     = "xxxx";

//ncmb: チャンネルクラス
let ThreadClass;
//ncmb:コメントクラス
let CommentClass;
//ncmb:ブックマーククラス
let BookmarkClass;

var limit = 10;

document.addEventListener("init",async function(event){
  if(event.target.matches("#first-page")){

    //NCMB ニフティクラウド初期化設定code
    ncmb = new NCMB(appKey, clientKey);
    CommentClass = ncmb.DataStore("Comment");

    //コメントクラスのデータ
    var comment_result = await CommentClass.count().limit(10).fetchAll();
    list_show(comment_result);

    //無限リスト表示
    infinite_load(10);

    //スクロール処理
    var page_content = document.querySelector("#first-page .page__content");
        page_content.addEventListener('scroll',async function(){
      //一番下までスクロールした場合
      if(page_content.scrollHeight <= page_content.clientHeight + page_content.scrollTop ){


      }
    });

  }
});

//リスト表示
function list_show(result){
  var list_code = [];  
  for(let object of result){

    if(object.Image != undefined){
      list_code.push(
      '<li class="list-item">' + 
        '<div class="list-item__center">' + 
          object.Comment + 
          '<img src="' + object.Image + '">' +
        '</div>' + 
      '</li>'
      );
    } else {
      list_code.push(
      '<li class="list-item">' + 
        '<div class="list-item__center">' + 
          object.Comment + 
        '</div>' + 
      '</li>'
      );
    }

  }
  
  document.getElementById("list01").insertAdjacentHTML("beforeend", list_code.join(""));
}

//無限リスト処理
function infinite_load(limit){
  var infiniteList = document.getElementById('infinite-list');
  //let list_code;
  
    infiniteList.delegate = {
      createItemContent: function(i) {
        //ons-listのons-lazy-repeat以外の子要素をすべて取得して返すがeeror
        if(document.getElementById("list01").children[i].className != "infinite-list"){
          return new document.getElementById("list01").children[i];  
        }
        
      },
      //リストアイテム数
      countItems: function() {
        return limit;
      }
    };

    infiniteList.refresh();
}