JavaScript의 Intersection Observer API는 무엇입니까?

소개

Intersection observer API는 JavaScript의 Observer API 중 하나로, 포함하는 루트 요소 또는 뷰포트를 기준으로 DOM 요소의 가시성 및 위치의 변화를 비동기적으로 관찰하는 방법을 제공합니다. . 이것은 Intersection Observer를 통해 대상 요소의 가시성과 위치를 기반으로 요소의 로딩 및 애니메이션을 제어할 수 있습니다. 이 옵저버 API는 주로 무한 스크롤, 지연 로딩 이미지, 사용자 상호 작용 추적 및 스크롤 기반 애니메이션에 사용됩니다.

이 기사에서는 Intersection Observer API의 모든 기본 사항에 대해 논의하여 웹 사이트에서 구현하고 멋지게 보일 수 있도록 합니다 😎.

건설자

const observer = new IntersectionObserver(callback, options)

매개변수

콜백:

대상 요소의 백분율이 임계값을 초과할 때 호출되는 함수입니다. 콜백은 항목과 관찰자라는 두 가지 매개변수를 입력으로 받습니다.

Entries: Entries 매개변수는 기능을 허용하는 인수이며 교차 상태를 변경하는 각 요소와 관련된 정보만 출력합니다.

관찰자: 관찰자는 요소의 교차 변경 사항을 관찰하도록 지시합니다. 이제 요소가 교차 상태를 변경하려면 현재 뷰포트 안팎으로 스크롤해야 합니다.

옵션:

옵션은 현재 관찰자의 설정을 포함하는 선택적 매개변수입니다. 옵션은

루트: 루트는 실제로 요소 관찰을 시작할 위치를 식별하는 데 도움이 됩니다. 예를 들어 { root: document.querySelector('#scrollArea') }로 설정하면 관찰자 API는 scollArea id만 관찰하기 시작합니다.

rootMargin: 루트 여백은 CSS 여백 속성과 유사합니다. 루트 요소 주위에 여백을 추가하여 확장하거나 루트의 크기가 충분한 유연성을 제공하지 않는 경우 캡처 프레임을 축소합니다. 기본값은 "0px 0px 0px 0px" 또는 "0px"

입니다.

임계값: 임계값은 isIntersecting 값이 true가 되기 전에 표시되어야 하는 요소의 백분율을 나타내는 0과 1 사이의 값을 허용합니다. 기본적으로 0으로 설정됩니다. 즉, 요소의 일부가 표시되자마자 교차하는 것으로 간주됩니다. 1로 업데이트하면 요소의 전체 부분이 표시되지 않으면 교차가 거짓이 됩니다.

행동 양식:

disconnect() - disconnect() 메서드는 가시성 변경에 대한 모든 대상 요소 감시를 중지합니다.

observe() - observe() 메서드는 id 또는 querySelector가 있는 요소의 교차 변경 사항을 관찰하는 것입니다.

takeRecords() - takeRecords() 메서드는

unobserve() - unobserve() 메서드는 요소를 더 이상 관찰할 필요가 없을 때 요소 관찰을 중지하는 데 도움이 됩니다.

예시

결론:

Intersection Observer는 뛰어난 관찰자 API로 지연 로딩 이미지부터 스크롤 기반 애니메이션까지 많은 사용 사례를 지원합니다. 또한 사용하기가 매우 쉽다는 점은 엄청난 보너스입니다.