I am a javascript beginner! There is currently a project like this. I hope to automatically add 5 groups of HTML when scrolling to the bottom of the page through javaScript.
For example, add 5 groups of HTML Lorem ipsum dolor sit amet consectetur.
But I found the information on the Internet and I still don’t know what to do. Write, so come to ask everyone~ thank you all.
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>Consider the following.
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>Based on the following: Javascript: How to detect if browser window is scrolled to bottom?