CSS만 이용해 모달 열려있을 때만 페이지 스크롤 막기

if (isOpen) {
  document.body.style.overflow = "hidden";
} else {
  document.body.style.overflow = "auto";
}

 
자바스크립트로는 이렇게 모달 상태가 open이면 document.body.style.overflow = "hidden"; 을 함으로써 스크롤을 막을 수 있다. 하지만 자바스크립트 없이 CSS로만 똑같은 기능을 구현할 수 있다.
 

/* dialog 태그를 사용하고 .showModal() 메서드를 통해 dialog를 열었을 경우 */
body:has(dialog[open]) {
  overflow: hidden;
}

/* 모달에 클래스를 넣어 사용할 경우 */
body:has(.modal-open) {
  overflow: hidden;
}

 
GlobalStyle 또는 전체 CSS 스타일에 이 코드를 넣으면 끝이다.