교차로 관찰자가 필요한 이유는 무엇입니까?

교차 관찰자 API란?

작성자: mdn 문서

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

이해하다

두 단어로 만든 이 개념은 먼저 Intersection이고 다른 하나는 Observer입니다. 먼저 이 주제에 대한 기본적인 관점을 살펴보겠습니다.

이름에서 교차는 객체에 대한 최소값을 의미한다는 것을 이해할 수 있습니다. 이 개념에서 교차는 하나가 뷰포트이고 다른 하나는 div, img와 같은 요소와 교차합니다.

관찰자는 특정 대상 요소가 뷰포트에 들어올 때 뷰포트를 관찰하고 대상 항목이 뷰포트에 오는 세부 정보를 제공합니다. 분명히 대상 요소는 페이지를 스크롤하여 뷰포트에 들어옵니다.

🤔 요소를 관찰하여 무엇을 할 수 있습니까?

요즘 웹사이트는 다음과 같은 요소에 애니메이션을 제공하기 위해 이 개념을 사용합니다.

image lazy loading effect

Infinite scrolling on page

Framer motion animated in viewport

이것의 가장 인상적이고 다소 복잡한 예Apple website

이벤트를 스크롤하지 않는 이유는 무엇입니까? 😒

스크롤 이벤트는 요소가 뷰포트에 들어올 때 대상 요소 스크롤이 함수를 계속 호출할 때 이벤트 리스너이며, 이러한 이유로 애니메이션이 지연 없이 계속 렌더링되고 원하는 대로 출력을 제공하지 않습니다.

이 예를 보자.



이를 처리하려면 이벤트 핸들러 함수 호출 지연에 Throttling을 사용해야 합니다.

Intersection Observer를 사용하면 조절이 필요하지 않습니다.

이러한 유형의 문제를 처리하기 위해 관찰자에 의한 교차 비율이 있습니다. 이는 대상 요소의 어느 부분이 뷰포트에 렌더링되는지 알려줍니다.

Intersection Observer API에서 제공하는 임계값이 있습니다. 뷰포트에 표시되는 대상 요소의 백분율을 나타내는 하나 이상의 숫자 값을 제공합니다.

스크롤 이벤트에서 대상 요소의 높이 보기 값을 가져오기 위해 몇 가지 복잡한 계산을 계산해야 합니다. 교차 관찰자에서는 이러한 모든 값을 얻습니다.

대상 요소를 관찰하는 데 사용할 수 있는 교차 비율입니다. 문서 작성

The degree of intersection between the target element and its root is the intersection ratio. This is a representation of the percentage of the target element which is visible as a value between 0.0 and 1.0.

여기서 0.0은 0%, 0.5는 50%, 1.0은 뷰포트에 100% 표시됨을 의미합니다.

Intersection Observer API로 스크롤할 때 페이지 배경색을 변경하는 예

코드로 시작하자

MDN 문서 참조

let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

대상 요소가 IntersectionObserver에서 지정한 임계값을 충족하면 함수 콜백이 호출됩니다.

콜백은 IntersectionObserverEntry 객체 목록을 받습니다.



MDN의 예


제 블로그를 읽어주셔서 감사합니다 😊
피드백과 제안을 제공하십시오.