모달 뒷 배경 스크롤을 막는 법
생각보다 간단하다.
useEffect(()=>{
document.body.classList.add('overflow-hidden');
return ()=>{
document.body.classList.remove('overflow-hidden');
};
},[]);useEffect는 컴포넌트가 마운트될때(modal이 열릴 때)와 언마운트 될 때(modal이 닫힐 때) 실행된다.
document.body.classList.add('overflow-hidden');이 코드는 모달이 열릴 때 body태그에 overflow-hidden클래스를 추가하게 된다.
이 스타일이 적용되면, 페이지의 내용은 스크롤할 수 없게 된다.
즉 모달을 띄운 후 배경이 스크롤 되는 것을 방지할 수 있다!
뒷 배경 스타일일 밀리는 상황 방지
useEffect(()=>{
//스크롤바 너비 계산
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
//body스타일 조정
document.body.style.overflow = 'hidden';
document.body.style.paddingRight = `${scrollbarWidth}px`;
return ()=>{
document.body.style.overflow = '';
document.body.style.paddingRight = '';
};
},[]);useEffect훅은 모달이 열릴 때마다 body의 스타일을 수정하여 스크롤을 차단하고, 스크롤 바의 너비를 고려해 페이지 레이아웃이 밀리지 않도록 한다.
const scrollbarWidth = window.innerWidth - document.documentElement;
이 코드에서는 현재 브라우저의 화면 너비(window.innterWidth)와 스크롤이 없을 경우 화면 너비 (document.documentElement.clinetWidth) 차이를 계산하여 스크롤바의 넓이를 구한다.
이 값은 각기 다른 브라우저와 운영 체제에서 스크롤바의 너비가 다를 수 있기 때문에 동적으로 계산된다.
document.body.style.overflow = 'hidden';이 스타일을 적용하면 페이지 배경에서 스크롤을 막게 된다.
document.body.style.paddingRight = ${scrollbarWidth}px; 여기서 스크롤바가 사라진 공간을 메우기 위해 paddingRight를 설정한다.
이를 통해 페이지 레이아웃이 오른쪽으로 밀리지 않도록 하고, 스크롤바가 사라진 부분에 공간을 확보하게 된다.
return부분에서 useEffect훅은 컴포넌트가 언마운트될때 실행되는 정리 함수가 필요하다.
이 부분은 모달이 닫힐 때 실행되며, body의 스타일을 원래대로 복구한다.
overflow를 기본값으로 되돌리고 (document.body.style.oveflow=''),
paddingRight를 제거한다. (`document.body.style.paddingRight ='')
