¡Soy un principiante de javascript! Actualmente hay un proyecto como este. Espero agregar automáticamente 5 grupos de HTML al desplazarme hasta la parte inferior de la página a través de javaScript.
Por ejemplo, agregue 5 grupos de HTML Lorem ipsum dolor sit amet consectetur.
Pero encontré la información en Internet y todavía no sé qué hacer. Escriban, así que vengan a preguntarles a todos ~ gracias a todos.
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>Considera lo siguiente.
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>Basado en lo siguiente: Javascript: ¿Cómo detectar si la ventana del navegador se desplaza hacia abajo?