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 >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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Consider the following.

let demo = document.querySelector('.demo');
let contain = document.querySelector('#contain');
let str = `<div >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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Based on the following: Javascript: How to detect if browser window is scrolled to bottom?