[js]스크롤 애니메이션 IntersectionObserver

See the Pen Untitled by sangmok-ye (@sangmok-ye) on CodePen.

IntersectionObserver는 비동기

 

intersectionRatio == 0 → isIntersecting : false

0 < intersectionRatio <= 1 → isIntersecting : true

 

 

IntersectionObserver 무한 스크롤

> last-child가 보이면 추가해줌

See the Pen IntersectionObserver 무한스크롤 by sangmok-ye (@sangmok-ye) on CodePen.

const ul = document.getElementById("container")
const options = {
  threshold: 1,
  // target이 모두 보이면 실행
}

const ioLast = new IntersectionObserver((e) => {
  e.forEach((target)=>{
  // e라는 모든 element에 forEach로 감시
    if(target.isIntersecting){
    // target이 완전히 다 보이면
      addElement(); 
      // target이 보이면 실행
      // target = li:last-child
    }else{
      return; 
      // target이 가려지기 시작하면 멈춤
    }
    ioLast.unobserve(target.target)
    // li:nth-child(4n) 감시 해제 
  })
}, options)

const addElement = () => {
  let num = Number(document.querySelector("li:last-child").textContent)
  for(let i=0;i<4;i++){
    let newLi = document.createElement("li")
    ul.appendChild(newLi)
    newLi.textContent = num+i+1
    ioAnimation.observe(newLi)
    // 애니메이션 추가
  }
  ioLast.observe(document.querySelector("li:last-child"))
  // 추가된 li의 last-child 감시
}

ioLast.observe(document.querySelector("li:last-child"))
// observe last-child 인식(4번 li를 의미)


/* 애니메이션 추가 */
const ioAnimation = new IntersectionObserver((e) => {
  e.forEach((target)=>{
    if(target.isIntersecting){
      target.target.classList.add("on")
    }else{
      target.target.classList.remove("on")
    }
  })
},options)

ul.querySelectorAll("li").forEach((el)=>{
  ioAnimation.observe(el)
})
// 모든 li를 감시함으로서 classList.add/remove를 해줌
/* // 애니메이션 추가 */

**target.boundingClientRect.y>=0을 걸어주면 위로 올라갔을때는 애니메이션 해제가 안됨

 

 

IntersectionObserver 무한 스크롤 - 꼼수ver

> 보이지않는 element를 생성하여 element가 보일때 추가해줌

See the Pen intersectionObserver 무한 스크롤 by sangmok-ye (@sangmok-ye) on CodePen.