如何自动添加HTML标签，当页面滚动到底部通过javaScript?

Question

我是一个javascript初学者!目前有一个这样的项目。我希望在通过javaScript滚动到页面底部时自动添加5组HTML。

例如，添加5组HTML

但是我在网上找到了信息，我仍然不知道该怎么做。写，所以来问大家~谢谢大家。

let demo = document.querySelector('.demo');
let contain = document.querySelector('#contain');
let str = `<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>`;
function addDemo(){
if(contain.height == (window.height + window.scrollTo)){
console.log('123')
// demo.appendChild(str);
}
}
window.addEventListener('scroll',addDemo);

.demo{
padding:20px;
border:2px solid #222;
text-align:center;
}

<div id="contain">
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
</div>

Answer 1

考虑以下内容:

let demo = document.querySelector('.demo');
let contain = document.querySelector('#contain');
let str = `<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>`;
function addDemo(event) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
console.log('Reached Bottom of Page, add 5 more.');
for (var i = 0; i < 5; i++) {
contain.innerHTML = contain.innerHTML + str;
}
}
}
window.addEventListener('scroll', addDemo);

.demo {
padding: 20px;
border: 2px solid #222;
text-align: center;
}

<div id="contain">
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
<div class="demo">Lorem ipsum dolor sit amet consectetur.</div>
</div>

基于以下内容:如何检测浏览器窗口是否滚动到底部?