Portfolio

요소의 가시성(Visibility, 보이는지 보이지 않는지) 관찰!

브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지 관찰

더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공

사용예시


const io = new IntersectionObserver((entries, observer) => { //관찰자 초기화
  console.log(observer)
}, options)

io.observe(element) //관찰할 대상 등록

IntersectionObserver(callback, options)

IntersectionObserver 객체를 생성하는 생성자

IntersectionObserver 객체는 대상 요소의 가시성 비율이 설정한 값을 넘어가는 것을 감지하면 콜백을 호출

`IntersectionObserver` 객체 메서드

observe() : 대상 요소의 관찰을 시작 (여러번 호출해서 관찰자에 여러 요소를 등록할 수 있다)

unobserve(target) : 대상 요소의 관찰을 중지

disconnect() : IntersectionObserver 인스턴스가 관찰하는 모든 요소의 관찰을 중지

`IntersectionObserver` 객체 속성

root

타겟의 가시성을 검사하기 위해 뷰포트 대신 사용할 요소 객체(루트 요소)를 지정. 타켓의 조상 요소이어야 함.

지정하지 않거나 null일 경우 브라우저의 뷰포트임

rootMargin

바깥 여백(Margin)을 이용해 Root 범위를 확장하거나 축소할 수 있음

CSS의 margin과 같이 시계방향의 4단계로 여백을 설정할 수 있으며, px 또는 %로 나타낼 수 있음

thresholds

옵저버가 실행되기 위해 타겟의 가시성이 얼마나 필요한지 표시한 백분율의 리스트

리스트 중 하나라도 넘어갈 때 콜백 호출

callback in 생성자


new IntersectionObserver((entries, observer) => {}, options)
// (entries, observer) => {} : callback

observer

만들어진 observer 자기 자신

entries

: IntersectionObserverEntry 인스턴스의 배열

IntersectionObserverEntry : 타겟과 뷰포트의 교차관련 정보 객체

가시성에 변화가 있는 요소들에 각각 매칭되는 entry

IntersectionObserverEntry의 속성들

boundingClientRect

관찰 대상의 사각형 정보(DOMRectReadOnly)

intersectionRect

관찰 대상의 교차한 영역 정보(DOMRectReadOnly)

intersectionRatio

관찰 대상의 교차한 영역 백분율

관찰 대상이 루트 요소와 얼마나 교차하는(겹치는)지의 수치를 0.0과 1.0 사이의 숫자로 반환
== intersectionRect 영역에서 boundingClientRect 영역까지 비율, Number)

isIntersecting

관찰 대상의 교차 상태(Boolean)
관찰 대상이 루트 요소와 교차 상태로 들어가거나(true) 교차 상태에서 나가는지(false) 여부

rootBounds

지정한 루트 요소의 사각형 정보(DOMRectReadOnly)
루트 요소에 대한 사각형 정보(DOMRectReadOnly)를 반환
이는 옵션 rootMargin에 의해 값이 변경될 수 있음
별도의 루트 요소(옵션 root)를 선언하지 않았을 경우 null을 반환

target: 관찰 대상 요소(Element)
time: 변경이 발생한 시간 정보(DOMHighResTimeStamp)

생성자 options


let observer = new IntersectionObserver(callbcak, { threshold: 0.1 });

관찰자의 속성을 조절할 수 있는 객체.

지정하지 않으면 문서 뷰포트를 루트로, 여백 없이, 0% 역치(하나의 픽셀이라도 보이면 콜백 호출)로 설정

root, rootMargin, threshold를 지정할 수 있다

intersection Observer