자동 스크롤 감지 기능 : IntersectionObserver 활용 방법

IntersectionObserver 함수

물체나 요소가 화면에 보이는지 감시하고, 보이거나 숨겨질 때 특정 동작을 수행할 수 있는 JavaScript 기능입니다. 스크롤 이벤트 대신 사용되며, 웹 페이지의 성능을 향상시킵니다.

- 감시요소의 가시성을 모니터링할 수 있음.

- 이 함수의 이점은 타이머, 스크롤 이벤트를 사용하지 않아도 됨

(번거롭게 스크롤의 높이, 작동 시간 이런 걸 계산하고 구하지 않아도 됨)

 

observe

observe메서드는 IntersectionObserver안에 감시하고자 하는 대상을 등록하는 용도로 사용됨

- 감시요소가 화면에 들어올 때나 나갈 때를 감지

observer.observe(감시요소);

 

// 감시 대상 요소 등록
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');

observer.observe(box1);
observer.observe(box2);
observer.observe(box3);

 

isIntersecting 

- 감시요소가 화면에 들어왔는지 여부를 "true", "false"로 반환해 주는 속성

const observer = new IntersectionObserver((e) => {
    e.forEach((a) => {
        if (a.isIntersecting) {
            console.log(box1, box2, box3);
        } else {
            console.log('요소가 화면에서 나갔습니다.');
        }
    });
});

 

isIntersecting 쪼개서 해석해봄

 

const observer = new IntersectionObserver((e) =>

이 매개변수 "e"안에는 observe로 등록했던 데이터들이 배열로 전달되어 있음(매개변수 작명은 자유임)

 

    e.forEach((a) => {
        if (a.isIntersecting) {
            console.log(box1, box2, box3);
        } else {
            console.log('요소가 화면에서 나갔습니다.');
        }
    });

배열로 등록해둔 데이터들을 한 개씩 끄집어내기 위해 forEach를 사용했고,

a는 하나씩 전달하기 위한 임시 변수로 사용된 것 임(매개변수(a)도 자유작명 가능)

 

감시요소가 감지될 때 CSS 스타일을 추가하고 싶으면 target 속성을 이용하면 됩니다

매개변수.target.(변경할 스타일)을 넣어주면 됩니다

const observer = new IntersectionObserver((entries) => {
    entries.forEach((a) => {
        if (a.isIntersecting) {
            // 감시요소가 보이면 넣을 스타일
            a.target.style.opacity = 1;
        } else {
             // 감시요소가 보이지않으면 넣을 스타일
            a.target.style.opacity = 0;
        }
    });
});

 

 

요약:

위 코드는 감시요소가 화면에 보일 때마다 box1, box2, box3 요소를 출력하고

사라질 때마다 "요소가 화면에서 나갔습니다."를 출력해라.라는 뜻임

감시요소가 감지될 때 스타일을 변경하고 싶으면 매개변수.target을 이용해서 바꿀 수 있음