230806 - til

요소의 가시성 관찰(Intersection Observer)

 

- 기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공합니다.

이 기능은 비동기적으로 실행되기 때문에, scroll 같은 이벤트 기반의 요소 관찰에서 발생하는 렌더링 기능이나 이벤트 연속 호출 같은 문제 없이 사용할 수 있습니다.

const io = new IntersectionObserver(function (entries) {
	entries.forEach(function (entry) {
    	console.log(entry.isIntersecting, entry.target)
    })
})

const h1Els = document.querySeclectorAll('h1')

h1Els.forEach(function (el) {
	io.observe(el)
})

scroll를 통해 h1태그가 순서대로 교차 될 때 콘솔에 호출된다.