스크롤 끝에서 컨텐츠 추가

html

 

.box {
  width: 500px;
  height: 500px;
  border: 1px solid;
  font-size: 32px;
  font-weight: bold;
}

 

 

css

 

<div id="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

 

 

js

 

let count = 5;
let $lastBox = document.querySelector(".box:last-child");

const obsever = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting && count < 15) {
        for (let i = 0; i < 5; i++) {
          const $newBox = document.createElement("div");
          $newBox.className = "box";
          $newBox.textContent = ++count;
          document.querySelector("#container").appendChild($newBox);
        }
        obsever.unobserve($lastBox);
        $lastBox = document.querySelector(".box:last-child");
        obsever.observe($lastBox);
      }
    });
  },
  {
    threshold: 0,
  }
);

obsever.observe($lastBox);

 

 

출처 : https://codepen.io/feel0321/pen/popXKZg