모달 뒷배경 스크롤 방지하기

⭐ 방법 1

//스크롤 방지
document.body.style.overflow = "hidden";

//스크롤 방지 해제
document.body.style.overflow = "unset";

스크롤바가 사라졌다가 다시 나타나면서 가로가 변형된다.

⭐ 방법 2-1

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

scrollTo(string, radix)
: 문자열 인자를 파싱하여 특정진수의 정수를 반환한다.

string -  파싱할 값(문자열이 아닐경우 ToString연산을 사용해 문자열로 변환하며, 공백은 무시한다.)
radix - string의 진수를 나타내는 2부터 36까지의 정수이다. (10이 기본값이 아니다!)

⭐ 방법 2-2

useEffect(() => {
 const scroll = window.scrollY;
 documnet.body.style.cssText = `
   position: fixed;
   top: -${scroll}px;
   overflow: hidden;
   width: 100%;
   height: auto;
 `;
return () => {
  document.body.style.cssText = "";
  window.scrollTo(0, scroll);
 }
},[])