옛날에는 스크롤의 탑기준이 어디에 왔는지에 따라서 헤더를 없애거나 백그라운드를 표현을 하면서 아래처럼 표현해왔다.
옛날에는 그랬지만 IntersectionObserver가 추가 됨에 따라서 좀더 편리하게 위의 기능을 처리 할 수 있다.
const observer = new IntersectionObserver((entries) => {
console.log('entries', entries)
}, {
root: document.querySelector('.contents'),
threshold: [0.1, 0]
})
const target = document.querySelector('.banner')
observer.observe(target);
사용 방법은 위와 같다.
IntersectionObserver( handler, options )
handler : 위의 설정기준으로 target엘리먼트가 루트엘리먼트에서 보이지 않을때와 10프로 미만 혹은 10프로 초과 혹은 보이지 않을때 호출이 된다. 호출시 첫번째 인자로 IntersectionObserverEntry[]를 전달해준다.
options : root 감시대상들의 상위요소이다.
threashold 임계값 목록이다.
아래는 IntersectionObserver를 이용하여 header에 백그라운드를 추가하는 샘플 코드입니다. 아래와 같은거 말고도 제일 스크롤이 제일 하단에 충돌 했을때 컨텐츠를 더 불러오는 등의 효과를 넣는것도 가능합니다.
댓글
댓글 쓰기