Scroll Container

배경

.wrapper {
  overflow-x: hidden; /* 가로 방향 넘침 숨기기 */
  overflow-y: visible; /* 세로 방향 넘침 허용 */
}

가로/세로 overflow를 개별적으로 제어하고 싶은 상황에서 위 코드는 작동하지 않음

개념

• scroll container는 CSS의 숨겨진 메커니즘
• 닥터후의 타디스처럼 "외부보다 내부가 더 큰" 공간을 생성
• overflow: scroll, hidden, auto 스타일을 주는 경우 생성

특성

• scroll container가 생성되면 무조건 양방향(가로/세로) 모두에 영향을 미침
• 자식 요소는 절대로 container 밖으로 넘칠 수 없음
• overflow: hidden도 사실은 scrollbar만 없는 scroll container임

대안

• 단순한 디자인 요소라면 overflow: clip 사용
• 접근성이 중요하거나 폭넓은 브라우저 지원이 필요하면 외부 wrapper 방식 사용
• overflow: hidden 사용 시 실제로는 scroll container가 생성된다는 점 인지 필요

a) 현대적 해결책 - overflow: clip

.wrapper {
  overflow-x: clip;
}

• scroll container를 만들지 않고 넘치는 부분만 잘라냄
• 2022년 말부터 지원, 현재 93.4% 브라우저 지원
• 잠재적인 접근성 이슈

b) 전통적 해결책 - 외부 wrapper 사용

.outer-wrapper {
  overflow-x: hidden;
  min-height: 100%;
}
.wrapper {
  /* 일반 스타일링만 적용 */
}

• 외부 wrapper에 overflow 처리를 위임
• 높이를 고정하지 않아 자연스러운 확장 가능
• 모든 브라우저 지원