웹 표준이 많이 발달했음에도 불구하고 백그라운드의 모달 스크롤 하나 제어 못하는 시대를 보며... 사실 내가 못 하는 거임

n년 전에도 position: fixed로 막았는데, 아직까지도 이걸로 막는다는 건 말도 안 돼서 이것저것 찾아보다가 답답해서 내가 알아낸 방법.

스크롤 막기

다 제치고 간단하게 두 줄이면 된다.

크로스브라우징으로 스크롤 막기

document.body.style.touchAction = isOpened ? 'none' : 'auto';
document.body.style.overflow = isOpened ? 'hidden' : 'auto';

overflow를 hidden으로 하면 원래의 포지션도 유지되면서 스크롤을 막을 수 있..으나! 역시 우리의 iOS는 자체 렌더링 덕분에 overflow가 hidden이어도 자식의 내용이 부모보다 많으면 자동으로 스크롤을 지원한다.

이를 막기 위해 touchAction 역시 같이 none으로 설정해주면 된다. 이전 포스트에서 언급한 overscroll-behavior은 사실 스크롤 체이닝에 관련된 거라, 여기에서는 해당하지 않는 듯.