CSS模拟滚动条高度

Question

我有一个巨大的列表，首先我要显示前x个项目。当用户滚动时，我想在列表中追加更多项目。

我的问题是我需要模拟滚动条，就像列表中已有的项目一样。

我怎样才能做到这一点？

    const container = document.querySelector("section");
    const arr = [];
    for (var i = 0; i < 20; i++) {
    	arr.push(`
        <div class="msg">msg</div>
      `)
    }

    container.innerHTML = arr.join("");

section {
	width: 300px;
	height: 3000px; // This is for example the total height
	overflow-y: scroll;
}

.msg {
	padding-bottom: 0.3em;
}

<section></section>

我的清单也是动态的。