[javascript] 간단한 무한 스크롤

단순히 무한 스크롤의 원리를 이해하고 활용하기 위한 용도로  작성해 보았던 무한 스크롤 인터렉티브 입니다. 

 

시연

See the Pen Untitled by youngwan2 (@youngwan2) on CodePen.

---

기존 JS 코드

const container = document.getElementById("container");
//추가되는 div 박스를 구분하기 위해 매기는 번호
let number = 6;

// div 태그를 추가하는 함수
function addBoxFunc() {

// scrollY 는 총 높이를 지속적으로 추적하는 용도이고,
// Height 는 정적인 총 높이를 구하기 위한 변수입니다.
  const scrollY = window.scrollY + window.innerHeight;
  const Height = document.documentElement.offsetHeight;
  
  // 가독성을 위해서 분기처리하는 코드는 따로 함수로 분리하였습니다.
  branchingFunc(scrollY,Height)

}

// 조건을 만족할 때 마다 새로운 div 태그를 생성하고
// dom 에 반영하도록 코드를 구성하였습니다.
function branchingFunc(scrollY,Height){
    if (Height < scrollY + 200) {
        const $div = document.createElement("div"); //div 태그 생성
        const textNode = document.createTextNode(`${(number += 1)}`); //텍스트 노드 생성
        $div.appendChild(textNode); //div 태그에 텍스트 노드 추가
        $div.classList.add("divBox"); // div 태그에 클래스 추가(큰 의미는 없습니다.)
        container.appendChild($div); // div 태그를 부모 태그의 젤 마지막 순서의 자식 요소로 추가
      }
}
// widow 전역 객체에 scroll 이벤트를 등록하여, 추적된 scrollY 값에 따른 분기처리하는 함수 호출
window.addEventListener("scroll", addBoxFunc);

---

리팩토링 JS 코드

위 코드에서 분기처리 함수 부분이 지저분 하고, 변수명이 해당 역할을 제대로 표현하지 못하고 있는 것 같았고,

두 함수 간에 분리가 제대로 이루어진 것 같지 않아서 이를 고려하여 더 가독성 있게 리팩토링 해봤습니다. 둘 중 이해하기 쉬운 것을 사용하면 좋을 것 같습니다.

const container = document.getElementById("container");
let number = 5;

// 실질적인 분기처리를 실시하는 함수
function addBoxFunc() {
  const bottomOfPage = window.innerHeight + window.scrollY; //페이지 바닥
  const documentHeight = document.documentElement.offsetHeight; //브라우저 총 높이
  if (bottomOfPage >= documentHeight - 200) { //기존 scrollY+200 을 바꾼 겁니다(기능차이 X).
    branchingFunc(); //분기처리 함수 호출
  }
}

// 분기처리 부분을 분리하여 정리한 함수(abbBoxFunc 함수 내에서 호출 시 실행)
function branchingFunc() {
  const $div = document.createElement("div"); //div 태그 생성
  const textNode = document.createTextNode(`${(number += 1)}`); //text 노드 생성
  $div.appendChild(textNode); // div 태그에 text 노드 추가
  $div.classList.add("divBox"); //div 태그에 클래스 속성 및 값 추가
  container.appendChild($div); //부모 태그의 마지막 자리에 완성된 div 태그 추가
}

// window 전역 객체를 대상으로 scroll 이벤트 등록 후 addBoxFunc를 반복 호출
window.addEventListener("scroll", addBoxFunc);

---

HTML

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

---

CSS

*{
  margin: 0;
}

body{
  height: 100%;
}

#container{
  height: 100%;
}


div{
  height: 100vh;
  text-align: center;
  font-size: 5rem;
}

div:nth-of-type(2n){
  background-color: tomato;
}