$$config title: [js] 무한 스크롤 keywords: - IT - js $$ [참고](https://velog.io/@dishate/%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%A5%BC-%EB%B3%B4%EC%97%AC%EC%A3%BC%EB%8A%94-%EB%B0%A9%EB%B2%95-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4) # 무한 스크롤 ```html

``` ```css .box { width: 500px; height: 500px; border: 1px solid; font-size: 32px; font-weight: bold; } ``` ```js // window scroll event let count = 5; window.addEventListener("scroll", (e) => { const isScrollEnd = window.innerHeight + window.scrollY + 200 > document.body.offsetHeight; if (isScrollEnd && 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); } } }); //Intersection Observer 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); ``` - InterSecionObserver는 특정 DOM 요소가 viewport에 들어왔는지를 판단하는 API - observe() 메소드로 특정DOM을 관측하도록 하면, DOM이 viewport에 들어왔는지 안들어왔는지 판단 - observe() 메소드로 5번째 div를 관측하고 있을 때, 10번까지 div를 추가 생성하고, 10번째 div를 관측하지만 5번째 div도 여전히 관측하고 있기 때문에 스크롤을 올렸다가 내리면 15번까지 div가 생김 -> 기존의 dom은 unobserve() 메소드로 관측을 해제해야 함 - option의 threshold 값은 0일 경우 조금만 viewport에 들어와도 감지, 1일 경우 완전히 들어와야 감지