무한 스크롤 (Intersection Observer API)

실행 시점

DOMContentLoaded 를 통해 html 문서를 완전히 불러왔을 때 load 함수를 실행한다.

window.addEventListener('DOMContentLoaded', load);

function load(){
  addItems();
}

addItems 함수 구현

Node.appendChild() : 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 추가

elem.setAttribute(name, value) : 요소의 속성 값 변경(혹은 추가)
elem.name = value 형태로 설정됨.

generateDataBlock 함수를 통해,
div 요소를 생성하고
속성 값을 부여한 뒤,
텍스트로 message 인자를 부여한다.

for문을 순회하면서 this is item ... 메시지를 넣은 요소를 divContent에 마지막 자식 요소로 차례대로 추가한다.

let divContent = document.getElementById('divContent');
let listEnd = document.getElementById('listEnd');
let itemCount = 0;
let appending = false;

function addItems(){
  appending = true;
  for (let i=0; i<20; i++) {
    let item = generateDataBlock(['this is item #', itemCount].join(''));
    divContent.appendChild(item);
    itemCount++;
  }
  appending = false;
}

function generateDataBlock(message){
  let item = document.createElement('div');
  item.setAttribute('class', 'item');
  item.textContent = message;
  return item;
}

Intersection Observer API

인자를 넘기는 options 객체를 통해 observer 콜백 상황 조작.
root : 대상객체의 조상 요소 => null이거나 값을 지정하지 않으면 기본값은 브라우저 뷰포트
rootMargin : root의 여백
threshold : 1.0이면 전부 보여졌을 때 콜백 호출, 0.5면 50% 보여졌을 때 콜백 호출

let options = {
  root: null,
  rootMargin: '0px',
  threshold: 1.0,
}
let callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.target.id === 'listEnd') {
      if (entry.isIntersecting && !appending) {
        appending = true;
        setTimeout(() => {
          addItems();
        }, 3000);
      }
    }
  });
};

let observer = new IntersectionObserver(callback, options);
observer.observe(listEnd);

소스 코드

[js-toy-pj] infinite scrolling

참고

Infinite Scrolling in a Web Page using JavaScript

모던 javascript 튜토리얼 - 속성과 프로퍼티

Intersection Observer API - Web API | MDN