[Javascript, React] Modal Scroll 방지 또는 막기

Scroll을 막아야 할 경우는 많다 예를 들어보면
경우 1.
브라우저 스크롤이 있는데 모달팝업의 내부 스크롤도 있는 경우
모달팝업의 내부 스크롤을 마우스로 내리다가 끝에 다다르면, 브라우저 스크롤이 내려간다.
경우 2.
모바일 경우, 햄버거 메뉴를 클릭했을 경우
스크롤을 하다보면 뒷 화면도 같이 스크롤이 된다.

해결방법

스크롤을 막아야 하는 부분에 overflow: hidden; 을 주어야 한다.

React의 경우

Modal창을 띄울때, Scroll 비활성화 방법

const showModal = (e) => {
    document.body.style.overflow = "hidden";
};

Modal창을 닫을때, Scroll 활성화 방법

const hideModal = (e) => {
    document.body.style.overflow = "unset";
};

Javascript의 경우

만약 조건문을 사용할 경우에는 add, remove 매소드를 사용하면된다.

/* index.js */
const button = document.querySelector("button");
const nav = document.querySelector(".nav");
const body = document.getElementsByTagName("body")[0];


button.addEventListener("click", () => {
  Button.classList.toggle("active");
  nav.classList.toggle("active");
  body.classList.toggle("scroll-lock");
});

body { overflow: hidden; }