onWheel DOM 이벤트

📍 기능 설명

React의 지원하는 DOM 이벤트중에 onWheel을 사용하여, 첫 <div>(height: 100vh)에서 스크롤을 하게되면, 두번째 <div>로 이동시키게 만들어 보았다.

📍 Code & 설명

우선 최상단의 부모 태그인 <Wrapper>에 onWheel 이벤트를 주고,

• onWheel은 마우스 휠을 사용할 시, 일어나는 이벤트이다.

 <Wrapper onWheel={onScrollFunction}>

그런다음 onWheel 이벤트 발생 시, 실행되는 함수인 onScrollFunction()을 바인딩 해주었다.

  const [scroll, setScroll] = useState(0);

  const onScrollFunction = () => {
    setScroll(window.scrollY);
  };

초기값이 0인 스크롤 값을 state 선언해주고, 휠 이벤트마다window.scrollY로 현재의 y축의 스크롤 값을 setScroll()함수로 변경해 주었다.

useEffect를 사용하여, scroll값의 변화가 일어나면 scrollFunction()이라는 함수를 호출하도록 했고,

  useEffect(() => {
    scrollFunction();
  }, [scroll]);

scrollFunction이라는 함수는 다음과 같이 첫 화면에서 스크롤을 하는 순간 다음 <div>로 스크롤이 자동으로 되게 만들게 하기 위하여, scroll 값에 조건을 주었다.

조건에 맞게된다면 두번째 <div>의 useRef를 이용하여 DOM 접근을 하고, current.scrollIntoView를 해주게 되면, 해당 div의 상단에 맞춰 뷰를 보여주게 된다.

• { behavior: "smooth" } 를 주게되면 부드럽게 스크롤을 해서 포커싱을 해주는 것 처럼 만들어준다.

  const wheel = useRef(null);
  
  const scrollFunction = () => {
    if (scroll > 0 && scroll < 833) {
      wheel.current.scrollIntoView({ behavior: "smooth" });
    } else {
      return;
    }
  };
  
  useEffect(() => {
    console.log(window.scrollY);
    scrollFunction();
  }, [scroll]);
  
  const scrollFunction = () => {
    if (scroll > 0 && scroll < 250) {
      wheel.current.scrollIntoView({ behavior: "smooth" });
    } else {
      return;
    }
  };

// 스크롤 시, 포커싱할 div에 useRef를 사용하여 ref를 할당하였다.
<Box2 ref={wheel}>

📍 결과

첫 렌더링 후, 스크롤 조금이라도 하는 순간 지정 화면으로 자동으로 부드럽게 스크롤 되어 포커스 해주는 결과를 볼 수 있다.