[React] 모달창 열었을 때 스크롤 없애기

김나나·2024년 5월 7일

React

목록 보기
24/29

모바일용 햄버거 메뉴를 만들고, 이 버튼을 클릭했을 때 메뉴가 나오면 뒷배경 스크롤이 되지 않도록 하고싶어서 찾아보던 중에 모달창을 열고 닫는 핸들러 안에 document.body.style.overflow를 넣어 스크롤이 되지 않도록 만들 수 있다는 기쁜 소식을 듣고 실행해보았다.

우선 열고 닫을 때 필요한 onClick 이벤트 처리를 openHandler과 closeHandler이라는 이름으로 함수를 만들어주고,

모달창을 여는 핸들러 안에는
document.body.style.overflow = "hidden";을 넣고

모달창을 닫는 핸들러 안에는
document.body.style.overflow = "unset";을 넣어주었더니
햄버거 메뉴 버튼을 클릭하니 스크롤을 없앨 수 있었다!

profile
10분의 정리로 10시간을 아낄 수 있다는 마음으로 글을 작성하고 있습니다💕

0개의 댓글