Scroll 위치에 따른 애니메이션 제작하기

1. 특정 요소의 스크롤 값 구하기

먼저 스크롤 될 때마다 애니메이션을 구현하기 위해선 자식 요소를 감싸고 있는 부모 요소의 스크롤 값을 구해야 합니다.

저희 프로젝트에서는 window scroll 값을 구하는 custom hooks이 있어서 그 코드를 참고하여 custom hooks을 제작하였습니다.

코드블록


// hooks/useGetScrollHeight
import type { RefObject } from 'react';
import { useEffect, useState } from 'react';

const useGetScrollHeight = (ref: RefObject<HTMLElement>) => {
  const [scrollTop, setScrollTop] = useState<number | undefined>(0);

  const handleScroll = () => {
    setScrollTop(ref?.current?.scrollTop);
  };

  useEffect(() => {
    ref?.current?.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
      // eslint-disable-next-line react-hooks/exhaustive-deps
      ref?.current?.removeEventListener('scroll', handleScroll);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [ref]);

  return scrollTop;
};

export default useGetScrollHeight;

위 코드는 ref를 인자로 받고 해당 ref의 스크롤 값을 return 해주는 hooks 입니다. 코드를 더 자세히 설명하겠습니다.

1-1. throttling

throttling이란 이용하면 발생되는 이벤트 중간에 지연을 발생시키는 것입니다. 출처

저희가 스크롤 할 때는 마우스 휠을 한번 툭 만지죠? 하지만 웹 사이트에선 그동안 많은 일이 일어납니다. 해당 hooks를 실행하면 스크롤 될 때마다 계속 페이지도 렌더링 될 것입니다. 그래서 throttling를 적용한 것이죠.

0.3초마다 throttling 상태를 변경시켜 이벤트 지연을 시켰습니다.

1-2. passive option

passive option은 이벤트 리스너 옵션 중 하나로 스크롤 성능을 최적화하는 역할입니다. 하지만 이 옵션은 default 옵션이 아닌데요. 어떠한 이유일까요?

passive를 true로 설정하면 개발자가 명시적으로 preventDefault를 호출할 수 없게 되므로 스크롤 동작에 대한 제어가 제한될 수 있습니다. 하지만 제가 작성하는 코드는 preventDefault를 호출할 필요가 없어 스크롤 연산 성능 향상을 위해 passive를 true로 설정하였습니다.

Passive Event Listeners

Passive Event Listeners란 touch, wheel 등 일부 이벤트에서 동작을 최적화하여 스크롤 성능을 대폭 향상시킬 수 있는 웹 표준 기능입니다.

https://velog.io/@sejinkim/Passive-Event-Listeners

그래서 최종 코드는 다음과 같습니다!

코드블록


import type { RefObject } from 'react';
import { useEffect, useState } from 'react';

const useGetScrollHeight = (ref: RefObject<HTMLElement>) => {
  const [scrollTop, setScrollTop] = useState<number | undefined>(0);
  let throttling = false;

  const handleScroll = () => {
    if (throttling) return;

    throttling = true;

    setTimeout(() => {
      setScrollTop(ref?.current?.scrollTop);
      throttling = false;
    }, 300);
  };

  useEffect(() => {
    ref?.current?.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
      // eslint-disable-next-line react-hooks/exhaustive-deps
      ref?.current?.removeEventListener('scroll', handleScroll);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [ref]);

  return scrollTop;
};

export default useGetScrollHeight;