스크롤 막기 이벤트

사이드 메뉴를 열면 배경이 스크롤이 되지 않도록 하고 싶을 때

 

 

const NavBar = () => {

  useEffect(() => {

      const scrollY = window.scrollY;

      const bodyStyle = document.body.style;

      bodyStyle.position = "fixed";

      bodyStyle.top = `-${scrollY}px`;

      bodyStyle.overflowY = "scroll";

      bodyStyle.width = "100%";

      return () => {

        bodyStyle.cssText = "";

        window.scrollTo(0, scrollY);

      };

    }, []);
    

    return ( ...<컴포넌트/> );
};

 

사이드 메뉴 컴포넌트가 나타날 때 body에 css style을 몇 가지 적용하여 스크롤이 되지 않도록 할 수 있다.

 

    const scrollY = window.scrollY;

0. 현재 스크롤 위치를 저장한다.

 

    bodyStyle.position = "fixed";

1. body에 position을 fixed로 바꾸게 되면 스크롤 바가 사라지게 된다.

 

    bodyStyle.top = `-${scrollY}px`;

2. 현재 스크롤 위치로 top을 이동한다.

 

    bodyStyle.overflowY = "scroll";

3. 스크롤 바가 나타나도록 한다.

 

    bodyStyle.width = "100%";

4. 내용물의 css가 display: flex로 인해 수축하는 것을 막기 위해서 width를 100%로 설정한다.

 

    return () => { ... } ***컴포넌트가 제거될 때***

      bodyStyle.cssText = "";

5. body에 적용 된 인라인 스타일을 모두 제거한다.

 

      window.scrollTo(0, scrollY);

6. 현재 스크롤 위치로 이동시킨다. 

---

width 설정 안했을 때 축소된 컨테이너 모습

---

참고글

React에서 Modal 구현하기(feat. createPortal, 스크롤 막기)