IntersectionObserver API - 긴 스크롤 상황에서 태그에 콜백적용하기

🤔IntersectionObserverAPI 쓰는 이유?

제목에서 보듯이 긴 스크롤을 컨트롤하는 웹 제작자가 태그 요소에 어떤 css 효과를 주었을 때 더 효과적으로 적용하는 방법을 쓰기 위해서 이 메서드를 사용한다.

왜냐하면, 긴 스크롤 상황에서 css 효과를 모든 태그에 다 적용해버리면 자원낭비가 될 수 있기 때문이다.

그래서 viewport(지금 보는 화면)에 들어오는 요소에 콜백함수를 적용하거나, 사용자가 지정한 scroll되는 영역을 root로 설정해서 그 영역안에 나타나는 요소에 콜백함수를 적용할 수 있다.

무한 스크롤 상황에서 유용할 수 있다.

 

자료

실습자료: https://blog.kakaocdn.net/dna/xt2em/btryM0gpAtF/AAAAAAAAAAAAAAAAAAAAANfEw7r_2nVFN7pCKAVicSBl8rPiFMUqggNTGcTz3Rzw/tfile.html?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1769871599&allow_ip=&allow_referer=&signature=zG%2B5K%2BI3HJnOnX98Wgl4jReZYGg%3D

intersection_observer.html

0.00MB

html 에는 20개의 box tag들이 있다.

아래는 그 교차점관찰자 메서드를 이용해서 box들에 대한 상태를 탐색할 수 있다.

  <script>
    //우리가 원하는 요소가 특정한 영역에 들어왔을 떄 콜백함수를 호출해주는 관찰자 이다
    //box가 보이거나 나갈때 마다 observe메서드가 호출됨
    const boxes = document.querySelectorAll('.box');

    const callback = (entries, observer) => {		//2
      // 총 20개 요소 들어가 있음 - 콘솔 자세히 볼것
      entries.forEach(entry => {
        if (entry.isIntersecting) {		//3
          console.log(entry.target);
          entry.target.classList.add('active')	//4
        } else {
          console.error(entry.target)
          entry.target.classList.remove('active')
        }
      })
      // console.log(observer)
    }
    const observer = new IntersectionObserver(callback)	//0

    boxes.forEach(box => observer.observe(box)) // 1
  </script>

0. IntersectionObserver 메서드에 콜백함수를 넣어 IntersectionObserver 인스턴스를 생성한다. 여기에 정보가 담겨 있다.

1. 모든box태그들을 반복문 돌리면서 각각의 박스에 observer 인스턴스의 observe메서드를 실행해본다. 메서드의 인자에는 박스 요소를 넣는다.

 

2. 콜백함수 안에는 entries 인자에는 아래의 정보가 담긴다

foreach로 entries의 요소를 확인해보면 아래의 정보를 확인 할 수 있다. Intersecting은 보이는 유무확인용이다.

 

 콜백 함수의 entries 인자를 forEach로 console.log(entry.target); 해보면 아래와 같다.

 

3. entry 요소가 isIntersecting가 true일때, 즉 보일 때만

console.log(entry.target) 이 찍히도록 해서 아래와 같이 2개의 box가 보인다.

안보이면 error를 출력하도록 해서 18개의 box가 에러로 출력 된다.

4. 보이는 box 만 class를 넣어줘서 색깔을 입힌다.

---

 실습자료 : https://blog.kakaocdn.net/dna/cVxuuj/btryPSnzPbh/AAAAAAAAAAAAAAAAAAAAAKvbPBMJcsFRBHctEj6e5HndB1ft0KWHig8PlRBO15WU/tfile.html?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1769871599&allow_ip=&allow_referer=&signature=08jbSpiOwqjXzUeXQlPoiRkc%2FGM%3D

intersection_observer.html

0.00MB

options 을 넣어서 세부적으로 콜백함수가 어떻게 적용될지 컨트롤 할 수 있다.

 <script>
    //우리가 원하는 요소가 특정한 영역에 들어왔을 떄 콜백함수를 호출해주는 관찰자 이다
    //box가 보이거나 나갈때 마다 observe메서드가 호출됨
    const boxes = document.querySelectorAll('.box');

    const options = {
      root: null, //viewport (우리가 보는 윈도우 부분)
      rootMargin: '100px', //기본값 0px, 100px로 설정하면 viewport의 테두리 100px을 포함하는 영역을 계산 하겠다는 의미이다. 100px 밖에서 부터 콜백함수 실행 하겠다!는뜻
      threshold: 1, //0~1, 얼마만큼 보여져야 콜백함수를 호출할지 결정한다. 0으로 설정하면 들어오자마자 콜백실행, 1로 하면 다들어와야 콜백실행한다. 한가지 알아둘것: 들어올떄는 정해진값쓰고, 나갈때는 threshold의 반대값이 적용된다. 0.7이라면 반대값은 0.3이 적용된다. 그럼 30%만큼 나가면 콜백함수가 해지된다!
    }

    const callback = (entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          console.log(entry.target)
          entry.target.classList.add('active')
        }
        else {
          console.error(entry.target)
          entry.target.classList.remove('active')
        }
      })
    }
    const observer = new IntersectionObserver(callback, options)

    boxes.forEach(box => observer.observe(box))
  </script>

root는 기본값 viewport 이다. 지금 보는 화면을 말한다.

rootMargin은 viewport의 마진값을 넣어서 화면밖의 영역을 확장시켜서 기준을 잡을 수 있다.

threshold는 한계점이라는 말로 0~1 사이로 설정할 수 있다. 1로 설정하면 아래에서 올라오는 박스가 100%보여야 콜백함수가 실행된다.

0.8로 설정하면 80%가 보여야 콜백함수가 실행된다. 눈여겨 볼점은 위로 박스가 사라질때는 0.8의 반대값인 0.2가 적용되어 콜백함수가 제거된다. 즉, 위로 사라지는 박스는 20%가 안보이면 콜백함수가 제거된다는 의미이다.

아래 처럼 아래박스는 콜백함수가 적용되었고, 위로 올라가는 박스는 콜백함수가 제거되었다.

---

컨테이너가 있는 박스를 IntersectionObserver 메서드로 확인: https://blog.kakaocdn.net/dna/7KKlT/btryPCyqSXD/AAAAAAAAAAAAAAAAAAAAAIB53yRysvUVsRESHqaUvIcmOFF1Ng8t2BEBMKWdoJ2E/tfile.html?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1769871599&allow_ip=&allow_referer=&signature=IweUufud319qs%2ByhVZJ9QxqEDHU%3D

intersection_observer_container.html

0.00MB

root의 기준을 .container 로 하면, 화면(viewport)의 크기를 줄여도 box가 어떠한 영향도 받지 않는다.

.container박스를 스크롤하면 그제서야 박스들이 콜백함수의 영향을 받는다.

따라서 사용자가 원하는 태그를 root로 설정해서 콜백함수를 적용시킬 수 있다. 그럼 엄청 편하겠다는 뜻이다.

---

IntersectionObserver 정의 - MDN

The IntersectionObserver interface of 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. The ancestor element or viewport is referred to as the root.

When an IntersectionObserver is created, it's configured to watch for given ratios of visibility within the root. The configuration cannot be changed once the IntersectionObserver is created, so a given observer object is only useful for watching for specific changes in degree of visibility; however, you can watch multiple target elements with the same observer.

(의역)

Intersection Observer API의 IntersectionObserver 인터페이스는

대상 요소가 조상 요소 또는 최상위 문서의 뷰포트와

교차하는 변화를 비동기 적으로 관찰하는 방법을 제공한다.

조상 요소 또는 뷰포트를 루트라고 한다.

 

IntersectionObserver가 생성되면 루트 내의 지정된 가시성 비율을 감시하도록 구성된다.

IntersectionObserver가 생성되면 구성을 변경할 수 없으므로 주어진 관찰자 객체는 가시성의 특정 변화를 관찰하는 데에만 유용하다.

 

Intersection Observer 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 API는

상위 요소 또는 최상위 문서의 뷰포트와 대상 요소의 교차에서 변경사항을 비동기적으로 관찰하는 방법을 제공한다.

 

역사적으로, 요소의 가시성 또는 서로에 대한 두 요소의 상대적 가시성을 감지하는 것은

솔루션이 신뢰할 수 없고 사용자가 액세스하는 사이트와 브라우저가 느려지는 경향이 있는 어려운 작업이었다.

웹이 성숙함에 따라, 이런 종류의 정보에 대한 필요성이 커졌다.

 

🤔교차로 정보는 다음과 같은 여러 가지 이유로 필요하다.

1. 페이지를 스크롤할 때 이미지 또는 기타 콘텐츠가 느리게 로드될 때

2. 사용자가 페이지를 넘길 필요가 없도록, 스크롤할 때 점점 더 많은 콘텐츠가 로드되고 렌더링되는 "무한 스크롤" 웹 사이트를 구현할 때

3. 광고 수익을 계산하기 위한 광고 가시성 보고할 때

4. 사용자가 결과를 볼지 여부에 따라 작업 또는 애니메이션 프로세스를 수행할지 여부를 결정할 때

 

과거에 교차로 탐지를 구현하는 데는 이벤트 핸들러와 Element.getBoundingClientRect()와 같은 호출 메서드가 포함되어 영향을 받는 모든 요소에 필요한 정보를 구축했다.

이 모든 코드는 메인 스레드에서 실행되기 때문에 이러한 코드 중 하나라도 성능 문제를 일으킬 수 있다.

사이트에 이러한 테스트가 로드되면 상황이 완전히 안좋아질 수 있다.

 

무한 스크롤을 사용하는 웹 페이지를 고려해 보자.

웹페이지가 어떤 라이브러리를 사용하여 페이지 전체에 주기적으로 배치된 광고를 관리하고, 여기저기 애니메이션 그래픽이 있으며, 알림 상자 등을 그리는 사용자 지정 라이브러리를 사용한다고 치자.

이 각각은 모두 메인 스레드에서 실행되는 자체 교차 탐지 루틴을 가지고 있다.

웹사이트의 제작자는 그들이 사용하고 있는 라이브러리들의 내부 작업에 대해 거의 알지 못하기 때문에 이런 일이 일어나고 있다는 것을 깨닫지 못할 수도 있다.

사용자가 페이지를 스크롤할 때 이러한 교차로 감지 루틴은 스크롤 처리 코드 동안 계속 실행되는데, 결과적으로 브라우저, 웹 사이트 및 컴퓨터에 대한 사용자 불만을 야기한다.

 

😮Intersection Observer API는 감시하고자 하는 요소가 다른 요소(또는 뷰포트)에 들어가거나 나갈 때마다 또는 두 요소가 교차하는 양이 요청된 양만큼 변경될 때마다 실행되는 콜백 함수를 코드에 등록할 수 있게 한다.

이렇게 하면, 사이트들은 더 이상 이런 종류의 요소 교차로를 감시하기 위해 메인 스레드에서 아무것도 할 필요가 없으며, 브라우저는 그것이 적합하다고 판단될 때 자유롭게 교차로의 관리를 최적화할 수 있다.

 

Intersection observer 개념과 사용

🤔Intersection Observer API를 사용하면 다음 상황 중 하나가 발생할 때 호출되는 콜백을 구성할 수 있다.

 

1. 대상 요소는 장치의 뷰포트 또는 지정된 요소와 교차할 때. (지정된 요소를 루트 요소 또는 루트라고 한다.)

2. 처음 관찰자에게 대상 요소를 관찰하도록 요청되는 경우.

 

일반적으로 대상 요소의 가장 가까운 스크롤을 할 수 있는 조상과 관련하여 교차로 변경 사항을 확인하거나 대상 요소가 스크롤할 수 있는 요소의 하위 요소가 아닌 경우 장치의 뷰포트를 확인한다.

장치의 뷰포트를 기준으로 교차로를 감시하려면 루트 옵션에 대해 null을 지정한다.

 

뷰포트 또는 다른 요소를 루트로 사용하든 API는 동일한 방식으로 작동하며

대상 요소의 가시성이 변경될 때마다 제공하는 콜백 함수를 실행하여 원하는 양의 루트와 교차한다.

 

대상 요소와 대상 요소의 루트 사이의 교집합 정도는 교집합 비율이다.

0.0과 1.0 사이의 값으로 표시되는 대상 요소의 백분율을 나타낸다.

 

intersection observer 만들기

생성자를 호출하고 임계 값이한 방향 또는 다른 방향으로 교차 될 때마다 실행할 콜백 함수를 전달하여 교차 관찰자를 만든다.

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

let observer = new IntersectionObserver(callback, options);

임계 값이 1.0이면 루트 옵션에 지정된 요소 내에서 대상의 100 %가 표시되면 콜백이 호출된다.

 

Intersection observer 옵션

 

root

대상의 가시성을 확인하기 위한 뷰포트로 사용되는 요소이다. 대상의 상위 항목이어야 한다. 

지정되지 않았거나 null인 경우 브라우저 뷰포트가 기본값이다.

 

rootMargin

루트 주위의 여백. 예를 들어 "10px 20px 30px 40px"(위, 오른쪽, 아래, 왼쪽)와 같은 CSS 여백 속성과 유사한 값을 가질 수 있다.

값은 백분율일 수 있다. 이 값 집합은 교차점을 계산하기 전에 루트 요소의 경계 상자의 각 측면을 증가시키거나 축소하는 역할을 한다. 기본값은 모두 0이다.

 

threshold

관찰자의 콜백을 실행해야 하는 대상 가시성의 백분율을 나타내는 단일 숫자 또는 숫자 배열이다.

가시성이 50% 표시를 통과하는 시점만 탐지하려는 경우 0.5의 값을 사용할 수 있다.

가시성이 25%를 더 통과할 때마다 콜백을 실행하려면 배열 [0, 0.25, 0.5, 0.75, 1]을 지정한다.

기본값은 0이다 (즉, 하나의 픽셀이라도 표시되면 콜백이 실행된다).

1.0 값은 모든 픽셀이 표시될 때까지 임계값이 전달된 것으로 간주되지 않음을 의미한다.

 

Targeting an element to be observed - 관찰할 요소를 대상으로 함

 

관찰자를 만든 후에는 관찰할 대상 요소를 지정해야 한다.

let target = document.querySelector('#listItem');
observer.observe(target);

//관찰자에 대한 콜백 설정이 처음으로 실행된다.
//관찰자에게 대상을 할당할 때까지 기다린다(목표가 현재 보이지 않는 경우에도).

 

 

대상이 IntersectionObserver에 지정된 임계값을 충족할 때마다 콜백이 호출된다.

콜백은 IntersectionObserverEntry 객체와 관찰자의 목록을 받는다.

let callback = (entries, observer) => {
  entries.forEach(entry => {
    // 각 항목은 관찰된 하나에 대한 교차점 변화를 설명한다.
    // target element:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
  });
};

콜백에 의해 수신된 항목 목록에는 교차점 상태의 변화를 보고한 각 대상에 대해 하나의 항목이 포함된다.

isIntersecting 속성 값을 확인하여 항목이 현재 루트와 교차하는 요소를 나타내는지 확인한다.

 

콜백은 기본 스레드에서 실행된다.
시간이 많이 걸리는 작업을 수행해야 하는 경우 Window.requestIdleCallback()을 사용하면된다.

또한 루트 옵션을 지정한 경우 대상은 루트 요소의 하위 항목이어야 한다.

 

How intersection is calculated

여기부터는 아래 링크 참고..

 

 

 

 

 

참고

https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver

IntersectionObserver - Web APIs | MDN

https://velog.io/@meganatc7/Intersection-Observer-%EB%9E%80

Intersection Observer 란?

https://velog.io/@doondoony/IntersectionObserver

👀 IntersectionObserver API