긴 정적 페이지는 문서 스크롤러, 자체 overflow:auto를 가진 스티키 목차, 뒤로 모멘텀을 전파하면 안 되는 모달이 동시에 존재합니다. 명시적 제어가 없으면 WebKit 고무줄 효과가 가장 안쪽 스크롤러에서 조상으로 이어져 배경 오스크롤, CTA 오탭, 상호작용 측정 노이즈를 만듭니다. 2026년에는 올바른 스크롤 컨테이너에 overscroll-behavior: contain을 두는 일과 scrollbar-gutter: stable, 고정 헤더용 scroll-padding을 함께 써서 스크롤 체이닝·스크롤바 예약·해시 정렬을 Safari와 iOS에서 하나의 이야기로 맞추는 것이 현실적인 표준입니다.
MacHTML Mac mini를 하루 약 16.9달러에 빌려 리허설하면 데스크톱 전용 Chromium 자동화만으로는 안정적으로 재현하기 어려운 iOS 특유 모멘텀 결함을 CI 이전에 잡을 수 있습니다.
스크롤 체이닝과 기본 브라우저 동작
스크롤 체이닝은 중첩 스크롤러가 끝에 닿은 뒤 남는 휠·터치 델타가 조상으로 전파되는 현상입니다. 요금표만 움직이려는 사용자가 히어로 영상까지 밀어버리는 전형입니다. 데스크톱 Safari와 iOS WebKit은 기본으로 연쇄하며 Chromium도 같아 한 번 고치면 에버그린 전반에 이득입니다.
모달이 열린 동안 body에 성긋이 overflow: hidden을 씌우면 iOS 배경 잠금 패턴과 보조기술과의 궁합이 깨지기 쉽습니다. 대신 모달의 스크롤 패널에 overscroll-behavior-y: contain을 두고 가로 캐러셀이 뒤로 가기 제스처로 새지 않게 overscroll-behavior-x: none을 고릅니다.
모달 본문의 contain
실제로 스크롤바를 쥐는 요소에 적용합니다.
.modal__body {
max-height: min(70vh, 640px);
overflow: auto;
overscroll-behavior: contain;
}contain은 체이닝을 멈추되 모달 안 위치 변경은 허용합니다. 가로 슬라이더와 세로 모달 스크롤이 공존하는 iOS에서는 touch-action: pan-y를 함께 써 가로 팬과 세로 스크롤 충돌을 줄입니다.
네이티브 <dialog>는 백드롭이 유틸리티를 물려받지 않습니다. 포커스 가능 영역이 이중이면 dialog 요소와 내부 스크롤러 모두에 규칙을 복제하십시오.
none이 더 안전한 경우
Android WebView 하이브리드에서 당겨서 새로고침을 막아야 하거나 가로 고정 분석 차트에서 스와이프 뒤로 가기를 절대 일으키면 안 될 때 overscroll-behavior: none이 빠릅니다. 도움이 되는 오버스크롤 표현도 눌러 무거운 지정이므로 먼저 contain을 시도합니다.
지도·캔버스 대시보드는 드래그 제스처를 국소에 가두려 양축 none이 필요할 수 있습니다. 줌 제스처가 살아 있는지 실기로 확인합니다.
auto와 명시적 리셋, 브레이크포인트
넓을 때는 목차가 스크롤되지 않고 좁을 때 overflow:auto가 되는 전환은 미디어 쿼리로 중첩 스크롤러가 있을 때만 overscroll 규칙을 켜는 편이 안전합니다.
@media (max-width: 900px) {
.toc { overflow: auto; overscroll-behavior: contain; max-height: 40vh; }
}레이아웃이 바뀔 때 contain을 제거하는 것을 잊으면 데스크톱 QA는 통과해도 모바일에서 문서로의 연쇄 스크롤이 사라지는 퇴행이 납니다.
iOS Safari, touch-action, 패시브 리스너
iOS는 모멘텀 스크롤과 제스처 인식을 밀접하게 엮습니다. 서드파티 분석이 패시브 휠 리스너에서 preventDefault를 기대하면 CSS만으로는 구하지 못합니다. 스니펫 감사를 병행하고 스크롤은 브라우저에 맡기는 설계가 overscroll과 잘 맞습니다.
120Hz ProMotion 기기에서는 감속 곡선이 짧게 느껴져 같은 물리라도 연쇄 오버스크롤이 거세게 느껴질 수 있습니다. 최저 지원 단말과 최신 단말 모두에서 만져 보십시오.
접근성: 포커스 트랩과 스크롤
모달이 포커스를 가두면 스크롤 가능 영역이 탭 순서·화살표 키로 닿게 설계 문서에 밝힙니다. 스크린 리더 사용자는 고무줄을 보지 못해도 연쇄 스크롤로 뒤 페이지가 움직이며 접근 가능 이름 위치가 흔들리는 불편을 겪습니다.
prefers-reduced-motion은 overscroll-behavior 자체를 끄지 않지만, 동작을 줄이는 사용자를 위해 최대 높이를 낮춰 불필요한 스크롤 깊이를 강요하지 않는 장치와 짝을 이룹니다.
role="dialog"를 둘 요소와 열릴 때 tabindex="0"으로 포커스를 받을 자식을 어디에 둘지 문서화하고, 본문에 포커스가 있을 때 뒤로 휠이 전달되지 않는지 QA로 확인합니다.
성능, 합성, will-change 함정
overscroll-behavior 단체는 가볍지만 같은 모달 스택에 backdrop-filter와 will-change: transform을 겹치면 모바일 Safari에서 합성 레이어가 늘어 메모리를 먹습니다. WebKit 레이어 탭에서 구형 iPad가 512MB급 GPU 사용량을 튀기지 않는지 보고 그림자 복잡도를 먼저 의심합니다.
모든 카드에 will-change: scroll-position을 깔지 말고 열린 모달이 있는 동안만 범위를 좁힙니다.
문서의 스크롤 구동 애니메이션과 체이닝을 거부하는 중첩 스크롤이 같이 있으면 타임라인이 엇갈릴 수 있어 효과 대상을 안쪽 스크롤러로 옮기는 선택도 검토합니다.
인쇄 스타일과 PDF 내보내기
컴플라이언스 PDF는 여전히 정적 페이지에서 인쇄됩니다. @media print에서 overscroll을 auto로 돌려 WebKit 에뮬레이션이 모달 최대 높이에서 내용을 자르지 않게 합니다. 대화상자 배경은 숨기고 문서 overflow를 원래대로 둡니다.
헤드리스 Chromium PDF는 인터랙티브 Safari와 일관되지 않아 .modal { position: static; max-height: none; overflow: visible; overscroll-behavior: auto; } 같은 인쇄 전용 CSS로 조항이 잘리지 않게 합니다.
중첩 contain 도입 전후 PDF 페이지 수 회귀 스냅샷을 비교해 캐러셀이 인쇄에서 접히지 않아 페이지가 늘어난 경우를 일찍 잡습니다.
판단 표: contain, none, auto
| UI 패턴 | 권장 | 비고 |
|---|---|---|
| 모달 법무 텍스트 | contain | 히어로 표류 차단 |
| 중첩 데이터 그리드 | 그리드에 contain, 문서는 auto | 그리드 비포커스 시 페이지 스크롤 유지 |
| 히스토리 리스크 가로 캐러셀 | 축에 none | Android WebView 별도 검증 |
| 전체 화면 지도 | none | 줌 제스처 생존 확인 |
출시 전 필드 체크리스트
지원 하한 iOS와 최신 Safari Technology Preview 모두에서 돌려 마이너 사이 WebKit이 스크롤 체이닝 해석을 조이는 차이를 잡습니다. 마케팅이 모달 뒤에 풀블리드 비디오 히어로를 남기면 디자인 리뷰용 화면 녹화를 남깁니다.
- 모달을 열고 끝까지 세게 스크롤해 배경 페이지가 움직이지 않는지 본다.
- VoiceOver·TalkBack으로 모달 안 포커스를 둔 채 반복한다.
- 1280px에서 320px로 리사이즈해 미디어 쿼리 contain 전환을 확인한다.
- CLS를 재며 scrollbar-gutter와 짝지어 스크롤바 출현 시 폭 점프를 줄인다.
- scroll-padding을 켠 채 푸터 앵커로 점프해 중첩 목차 끝 overscroll이 점프 마무리를 빼앗지 않는지 본다.
다듬어진 정적 HTML은 바깥 문서뿐 아니라 모든 스크롤 컨테이너의 물리까지 소유하는 일입니다. 모달 직후 document로 버블한 휠이 0인지 텔레메트리 한 줄을 더하고 Playwright로 200번 플링해도 카운터가 늘지 않음을 단언하면 안심입니다.
MacHTML Mac mini(대략 하루 16.9달러)는 네이티브 Safari와 Apple Silicon을 한데 두어 중첩 스크롤·모달 포커스 트랩·ProMotion 타이밍을 디자이너가 쓰는 환경에 가깝게 재현합니다.
클라우드 Mac mini에서 overscroll·모달 검증
전용 macOS에 SSH/VNC로 들어가 스크롤 체이닝·대화상자 레이어·해시 내비를 한꺼번에 사인오프합니다.