scroll prevent

프로젝트를 하며 모달창을 띄울 때, spacebar을 누를때마다 자꾸 스크롤이 발생하여 불편해서 

모달창이 뜨면 스크롤 자체가 안되게 방지하도록 구현했다.

 

• utils/useScrollPrevent.jsx
  • 여러 페이지에 쓰일 수 있는 기능이므로 util에 따로 빼주자

import { useEffect } from "react";

const useScrollPrevent = () => {
  useEffect(() => {
    document.body.style.cssText = `
          position: fixed; 
          top: -${window.scrollY}px;
          overflow-y: scroll;
          width: 100%;`;
    return () => {
      const scrollY = document.body.style.top;
      document.body.style.cssText = "";
      window.scrollTo(0, parseInt(scrollY || "0", 10) * -1);
    };
  }, []);
  return;
};

export default useScrollPrevent;

• Components/LoginModal.jsx
  • 원하는 페이지 및 컴포넌트마다 필요할 때 불러와서 적용시키기

import useScrollPrevent from "../utils/useScrollPrevent";

export default function LoginModal({ isModal }) {
    useScrollPrevent();
}

 

❓❓❓
JS에서 쓰이는 spacebar를 눌렀을 때, 스크롤 이벤트 방지 방법을 쓰려 했을 때, 적용이 안됐다.. 
물론 react에서 그대로 쓸 순 없겠지만.. 아예 상기 방법처럼 스크롤 자체를 prevent하는 것 보다 JS에서처럼 spacebar를 눌렀을 때에만 스크롤 이벤트를 방지시키는 방법은 무엇일까나..
아는 분 계시면 teach me plz..🥺