모바일 메뉴 오픈 시 스크롤 방지

모바일 메뉴가 화면에 나오면 스크롤이 일어나지 말아야 할 때도 있다.

 

스크롤 방지를 안 하면

 

 

스크롤 방지

모바일 메뉴가 보이면 body에 스타일을 주어 스크롤을 방지한다.

// 모바일 메뉴 오픈시 스크롤 방지
  useEffect(() => {
    if (showMobileMenu) {
      document.body.style.overflowY = "hidden";
      document.body.style.position = "fixed";
      document.body.style.width = "100%";
      document.body.style.height = "100%";
    } else {
      document.body.style.position = "relative";
      document.body.style.overflowY = "auto";
    }
  }, [showMobileMenu]);

 

전체 코드

export default function Header() {
  // mobileMenu
  const [showMobileMenu, setShowMobileMenu] = useState(false);
  const handleOpenMenu = () => {
    setShowMobileMenu((prev) => !prev);
  };

  // 스크롤 감지
  const [scroll, setScroll] = useState(false);
  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  const handleScroll = () => {
    if (window.scrollY >= 50) {
      setScroll(true);
    } else {
      setScroll(false);
    }
  };

  // 모바일 메뉴 오픈시 스크롤 방지
  useEffect(() => {
    if (showMobileMenu) {
      document.body.style.overflowY = "hidden";
      document.body.style.position = "fixed";
      document.body.style.width = "100%";
      document.body.style.height = "100%";
    } else {
      document.body.style.position = "relative";
      document.body.style.overflowY = "auto";
    }
  }, [showMobileMenu]);

  return (
    <>
      <header css={[headerArea, flexStyle]}>
        <div className="header-left">
          <h3>Test</h3>
        </div>
        {/* mobileMenu */}
        <div css={[mobileMenu]} onClick={handleOpenMenu}>
          <HiMenu />
        </div>
      </header>

      {/* mobileMenuBg & content */}
      {showMobileMenu && (
        <div css={mobileMenuBg} onClick={() => setShowMobileMenu(false)} />
      )}
      <div css={[mobileMenuContent, { right: showMobileMenu ? 0 : "-80%" }]}>
        <div className="menuContent">
          <div className="closeBtn" css={[mobileMenu]} onClick={handleOpenMenu}>
            <HiOutlineX />
          </div>
          <div className="scrollAlert">
            <p>{scroll ? "스크롤 중" : "..."}</p>
          </div>
        </div>
      </div>
    </>
  );
}

 

코드 적용 후