iOS 모달 스크롤, 그 끈질긴 녀석을 잡다

오늘 온라인 쇼핑몰 T에서 해결한 문제 하나. iOS에서 모달이 열렸을 때 뒤 배경이 함께 스크롤되는, 그 악명 높은 이슈를 정리했습니다.

position: fixed의 함정

처음엔 단순하게 생각했죠. overflow: hidden 주면 되는 거 아냐? 근데 iOS는 그렇게 호락호락하지 않더군요. 특히 Safari와 Chrome에서 터치 이벤트가 body를 뚫고 들어가는 걸 막으려면 좀 더 공격적으로 접근해야 했습니다.

결국 채택한 방식은 모달 열릴 때 position: fixed를 걸고, 현재 스크롤 위치를 저장했다가 닫을 때 복원하는 방법이었어요.

const lockBodyScroll = () => {
  const scrollY = window.scrollY;
  document.body.style.position = 'fixed';
  document.body.style.top = `-${scrollY}px`;
  document.body.style.width = '100%';
};

const unlockBodyScroll = () => {
  const scrollY = document.body.style.top;
  document.body.style.position = '';
  document.body.style.top = '';
  window.scrollTo(0, parseInt(scrollY || '0') * -1);
};

간단해 보이지만 이게 의외로 잘 먹히더라고요. 모든 모달 열기/닫기 함수에 이 로직을 심어놨습니다.

그 외 작은 수정들

온라인 쇼핑몰 B에는 아카이브 GNB 노출 기능을 추가했고, 아트페어 K 공식 웹사이트는 2025에서 2026으로 년도를 갈아타는 중입니다. (해가 바뀌었으니까요)

그리고 조용히 진행 중인 프로젝트가 하나 있는데, 바톤 매뉴얼 프로젝트이라는 사내 매뉴얼 시스템이에요. 오늘은 구글 OAuth 로그인을 붙이고, @ba-ton.kr 이메일만 허용하도록 필터링했습니다. Prisma로 프로필 테이블도 정의하고, 세션 미들웨어까지. 조금씩 윤곽이 잡혀가는 중입니다.

"모달 하나 제대로 만드는 게 이렇게 어려웠나" 싶지만, 이런 디테일이 쌓여서 매끄러운 UX가 만들어지는 거겠죠.

iOS에서 괴롭힘당하고 계신 분들께 작은 참고가 되길 바랍니다.

상세 커밋 내역

스타일 수정

온라인 쇼핑몰 T · chujihye · +20 / -2

코드 업데이트

온라인 쇼핑몰 T · Chu Jihye · +20 / -2

버그 수정

아트페어 K 공식 웹사이트 · dongha@macmini · +1 / -1

버그 수정

온라인 쇼핑몰 T · chujihye · +31 / -18

코드 업데이트

온라인 쇼핑몰 T · Chu Jihye · +31 / -18

버그 수정

아트페어 K 공식 웹사이트 · dongha@macmini · +2 / -2

버그 수정

아트페어 K 공식 웹사이트 · dongha@macmini · +3 / -1

스타일 수정

온라인 쇼핑몰 M · chujihye · +2 / -2

코드 업데이트

온라인 쇼핑몰 M · Chu Jihye · +2 / -2

기능 추가

온라인 쇼핑몰 B · sangheedev · +75 / -9

코드 업데이트

온라인 쇼핑몰 B · Lee Sanghee · +75 / -9

기능 추가

바톤 매뉴얼 프로젝트 · chujihye · +126 / -3

기능 추가

바톤 매뉴얼 프로젝트 · chujihye · +198 / -0

스타일 수정

쇼핑몰 J 관리시스템 · sangheedev · +2 / -3

기능 추가

바톤 매뉴얼 프로젝트 · chujihye · +9 / -3

기능 추가

바톤 매뉴얼 프로젝트 · chujihye · +23 / -2

position: fixed의 함정

결국 채택한 방식은 모달 열릴 때 position: fixed를 걸고, 현재 스크롤 위치를 저장했다가 닫을 때 복원하는 방법이었어요.

const lockBodyScroll = () => {
  const scrollY = window.scrollY;
  document.body.style.position = 'fixed';
  document.body.style.top = `-${scrollY}px`;
  document.body.style.width = '100%';
};

const unlockBodyScroll = () => {
  const scrollY = document.body.style.top;
  document.body.style.position = '';
  document.body.style.top = '';
  window.scrollTo(0, parseInt(scrollY || '0') * -1);
};

간단해 보이지만 이게 의외로 잘 먹히더라고요. 모든 모달 열기/닫기 함수에 이 로직을 심어놨습니다.

그 외 작은 수정들

"모달 하나 제대로 만드는 게 이렇게 어려웠나" 싶지만, 이런 디테일이 쌓여서 매끄러운 UX가 만들어지는 거겠죠.

iOS에서 괴롭힘당하고 계신 분들께 작은 참고가 되길 바랍니다.

iOS 모달 스크롤, 그 끈질긴 녀석을 잡다

position: fixed의 함정

그 외 작은 수정들

글 작성자

한송욱

커밋 참여자

작업한 프로젝트

상세 커밋 내역

position: fixed의 함정

그 외 작은 수정들