如何通過javaScript在頁面滾動到底部時自動添加HTML標簽？-有解無憂

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

uj5u.com熱心網友回復：

考慮以下。

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>

基于以下內容：Javascript：如何檢測瀏覽器視窗是否滾動到底部？

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/338613.html

標籤：javascript 查询 css

上一篇：如何將函式指標模板作為模板引數？

下一篇：當使用javascript按下按鈕或（切換）時，我們如何選擇所有段落？[復制]