如何通过javaScript在页面滚动到底部时自动添加HTML标签？

Question

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

例如，添加 5 组 HTML Lorem ipsum dolor sat amet consectetur。

但是在网上找了资料，还是不知道怎么办。 写，所以过来问问大家~谢谢大家。

 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>

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