scroll이벤트는 이벤트가 동기적으로 실행되기때문에 짧은 시간에 많은 콜백이 일어나면서 메인 스레드에 큰 부하를 준다.
Intersection Obsever은 비동기적으로 실행되기때문에 reflow를 발생시키지 않기때문에 성능 상에서 유리하다.
Intersection Obsever 인스턴스를 생성
let options = {
root: document.querySelector('#scrollArea'),
rootMargin: '0px',
threshold: 1.0
}
// options에 따라 인스턴스 생성
let io = new IntersectionObserver(callback, options); //관찰자 초기화
// 타겟 요소 관찰 시작
let target = document.querySelector('#listItem');
io.observe(target); //관찰할 대상 등록
new
키워드를 통해 인스턴스 생성한다
callback
, options
2개의 파라미터를 받는다
callback
은 가시성의 변화가 생겼을때 호출되는 콜백 로직options
는 만들어질 인스턴스에서 콜백이 호출되는 상황을 정의만약 더이상 타겟요소를 구독할 필요가 없다면 unobserve
로 제거 할 수 있다
관찰할 대상(Target)이 등록되거나 가시성에 변화가 생가면 관찰자는 콜백을 실행
콜백은 2개의 인수(entries, observer)을 가진다
타겟요소의 가시성을 확인할 때 사용되는 루트요소
이것은 타켓요소보다 상위요소이여야 한다
root값을 null
로 주었을때 기본값은 브라우저 뷰포트로 설정된다
margin
값을 주어 루트요소의 범위를 확장할 수 있다
즉, 확장된 영역 안에 타겟 요소가 들어가면 가시성에 변화가 생긴다
기본값은 0이며 설정 시 단위(px, %)를 꼭 입력해야한다
콜백이 실행 될 타겟요소의 가시성 퍼센트를 나타내는 단일 숫자 및 배열이 들어갈 수 있다
즉, 어느정도 타겟요소가 보여졌는지에 따라서 콜백을 호출할 수 있다
root번위를 교차 하는 순간 보여지고 싶다면 단일 숫자값 0
50%가 보여졌을때 탐지하고 싶다면 단일 숫자값 0.5
25%단위로 가시성이 변경 될 때마다 콜백이 실행되게 하고싶다면 [0, 0.25, 0.5, 0.75, 1]
대상요소의 관찰을 시작
대상요소의 관찰을 중지
관찰을 중지할 하나의 대상요소를 인수로 지정
1회 실행 후 관찰 중지하는 방법
const io1 = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
// 가시성의 변화가 있으면 관찰 대상 전체에 대한 콜백이 실행되므로,
// 관찰 대상의 교차 상태가 false일(보이지 않는) 경우 실행하지 않음.
if (!entry.isIntersecting) {
return
}
// 관찰 대상의 교차 상태가 true일(보이는) 경우 실행.
// ...
// 위 실행을 처리하고(1회) 관찰 중지
observer.unobserve(entry.target)
})
}, options)
Intersection Obsever
가 관찰하는 모든 요소의 관찰 중지
Intersection ObseverEntry
인스턴스의 배열을 반환
entries
는 Intersection ObseverEntry
의 인스턴스 배열
콜백에 파라미터로 전달된다
Intersection ObseverEntry
에 포함된 프로퍼티들은 모두 읽기전용(readonly)이다
target : 관찰 대상 요소 (Element)
time : 변경이 발생한 시간 정보(DOMHighResTimeStamp)
rootBounds : 지정한 루트 요소의 사각형 정보(DOMRectReadOnly)
boundingClientRect : 관찰 대상의 사각형 정보(DOMRectReadOnly)
intersectionRect : 관찰 대상의 교차한 영역 정보(DOMRectReadOnly)
intersectionRatio : 관찰 대상의 교차한 영역 백분율(intersectionRect 영역에서 boundingClientRect 영역까지의 비율, Number)
isIntersecting : 관찰 대상의 교차 상태(Boolean)
polyfill은 IE7까지 사용가능
모듈 사용
$ npm i intersection-observer
전역으로 사용
<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
참고자료
https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API
https://pks2974.medium.com/intersection-observer-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-fc24789799a3
https://heropy.blog/2019/10/27/intersection-observer/
https://velog.io/@elrion018/%EC%8B%A4%EB%AC%B4%EC%97%90%EC%84%9C-%EB%8A%90%EB%82%80-%EC%A0%90%EC%9D%84-%EA%B3%81%EB%93%A4%EC%9D%B8-Intersection-Observer-API-%EC%A0%95%EB%A6%AC