개발자 테스트 준비: 단일 축 스크롤 컨테이너

Bramus
Free Debreuil
Free Debreuil
LinkedIn

게시일: 2026년 9월 4일

'단일 축 스크롤 컨테이너' 기능은 CSS overflow 속성을 확장하여 clip과 결합된 스크롤 가능한 값 (auto, scroll, hidden)을 지원하므로 한 축에만 스크롤 컨테이너가 생성됩니다 (예: overflow: scroll clip).

이 변경사항은 축별 고정 위치 지정과 같이 요청이 많은 기능을 지원하지만 다른 스크롤 종속 기능 전반에 추가적인 부작용도 발생시킵니다. 이러한 잠재적 호환성 위험으로 인해 개발자는 이 기능이 안정화 채널에 출시되기 전에 웹사이트를 테스트하고 의견을 제공해야 합니다.

이 기능은 베타, 개발자, Canary 출시 채널의 Chrome 153에서 개발자 테스트에 사용할 수 있습니다. 플래그를 사용 설정할 필요는 없습니다.

한 축에서 오버플로를 설정하는 문제

이 기능이 없으면 CSS로 진정한 단일 축 스크롤 컨테이너를 만들 수 없었습니다. 한 축을 스크롤하도록 구성하면서 다른 축을 계속 표시하려고 하면 (예: overflow-x: scroll을 설정하고 overflow-y: visible을 그대로 두는 경우) 브라우저의 스타일 엔진은 표시되는 축이 auto (또는 scroll)로 계산되도록 자동으로 강제합니다. 이렇게 하면 의도하지 않았더라도 2차원 스크롤러가 생성됩니다.

이 문제는 고정된 상단 행과 고정된 첫 번째 열이 있는 표를 만들려고 할 때 매우 두드러집니다. 다음 예에서는 첫 번째 열이 가로로 스크롤되는 .table-wrapper에 고정되고 상단 행이 문서의 스크롤러에 고정되는 것을 목표로 합니다.

<div class="table-wrapper" style="overflow-x: auto;">
  <table>
    …
  </table>
</div>

/* Scroll horizontally */
.table-wrapper {
  overflow-x: auto;
}

/* Sticky top row */
.table-wrapper thead {
  position: sticky;
  top: 0;
}

/* Sticky first column */
.table-wrapper td:first-child {
  position: sticky;
  left: 0;
}

직접 사용해 보면 작동하지 않는 것을 알 수 있습니다. 이는 앞에서 설명한 오버플로 문제 때문입니다. .table-wrapper가 효과적으로 2차원 스크롤러가 되기 때문입니다. 따라서 position: sticky가 각 축의 가장 가까운 상위 스크롤러를 조회할 때 두 경우 모두 .table-wrapper 요소가 됩니다.

실시간 데모

데모 녹화

단일 축 스크롤 컨테이너로 문제 해결

단일 축 스크롤 컨테이너를 사용하면 clip을 사용하여 보조 축이 스크롤러가 되지 않도록 명시적으로 방지할 수 있습니다. 이렇게 하면 position: sticky가 두 개의 서로 다른 스크롤 컨테이너를 독립적으로 추적할 수 있습니다.

표 예시를 수정하려면 가로 스크롤을 overflow-y: clip과 페어링합니다.

.table-wrapper {
  overflow-x: auto;
  overflow-y: clip;
}

또는 overflow 약어를 사용합니다.

.table-wrapper {
  overflow: auto clip;
}

이렇게 하면 .table-wrapper가 x축의 스크롤 컨테이너 역할만 합니다. 이제 고정된 상단 행이 이를 우회하고 y축의 문서 스크롤러에 올바르게 고정되며 첫 번째 열은 계속해서 .table-wrapper에 가로로 고정됩니다.

지원되는 브라우저에서 이 게시물을 확인하는 경우 다음 데모에서 작동하는 것을 확인할 수 있습니다.

실시간 데모

데모 녹화

영향을 받는 동작

단일 축 스크롤 컨테이너는 스크롤 컨텍스트가 평가되고 생성되는 방식을 변경하므로 다음과 같이 스크롤 컨테이너에 의존하는 다른 기능 전반에서 변경사항이 발생할 수 있습니다.

  • position: sticky: 표시된 대로 이제 요소가 단일 축 스크롤 컨테이너 내에 올바르게 고정되어 한 축에서 overflow: clip으로 제한되는 요소의 동작이 개선됩니다.
  • overscroll-behavior: 이제 요소가 한 축에서만 스크롤 컨테이너가 될 수 있으므로 overscroll-behavior가 잘린 축에서 더 이상 트리거되지 않아 맞춤 풀 투 리프레시 또는 바운스 효과에 영향을 줄 수 있습니다. 이 동작 변경사항은 Firefox 및 Safari와 일치합니다.
  • 프로그래매틱 스크롤: 이제 단일 축 스크롤 컨테이너에서 스크롤 API (Element.scrollTo()와 같은)를 호출하면 프로그래매틱 스크롤 제약 조건이 적용됩니다. 요소는 클립으로 정의된 축을 따라 프로그래매틱 방식으로 스크롤하지 않습니다.
  • 그리드 및 Flex 최소 셀 크기 조정: 그리드 및 Flex 레이아웃의 스크롤 컨테이너의 경우 기본 최소 크기 (min-width: auto)는 일반적으로 셀이 사용 가능한 공간에 맞게 조정되도록 무시됩니다. 동일한 축에서 overflow: clip이 설정되면 기본 최소 크기가 영향을 미치기 시작하여 Flex 또는 그리드 컨테이너가 더 커질 수 있습니다.

기능 감지

단일 축 스크롤 컨테이너 지원을 감지하려면 the @supports named-feature() rule을(를) 사용하여 single-axis-scroll-container 키워드를 쿼리합니다.

@supports named-feature(single-axis-scroll-container) {
  /* Feature is supported */
}

CSSWG 문제 #13677에서 설명한 대로 @supports (overflow: scroll clip)만 사용하여 확인하는 것은 파싱 검사일 뿐이며 브라우저가 수정된 단일 축 스크롤 동작을 올바르게 처리하는지 감지하지 못하므로 named-feature(single-axis-scroll-container)를 사용하는 것이 이 기능을 감지하는 권장 표준 방법입니다.

JavaScript에서 CSS.supports("named-feature(single-axis-scroll-container)")를 사용하여 이 검사를 실행합니다.

의견 제공

잠재적 호환성 위험을 평가하기 위해 190개의 웹사이트에서 테스트가 진행되었습니다. 이 분석에 따르면 변경사항으로 인해 심각한 손상이 발생하지는 않는 것으로 보입니다.

하지만 단일 축 스크롤 컨테이너는 스크롤 컨텍스트가 평가되는 방식을 근본적으로 변경하므로 더 넓은 범위에서 테스트가 진행됩니다. 이 기능이 안정화 버전으로 출시되기 전에 특이 사례를 식별할 수 있도록 안정화 버전이 아닌 Chrome 채널에서 웹사이트와 웹 애플리케이션을 테스트해 주시기 바랍니다.

문제가 발생하거나 예기치 않은 스크롤 동작이 발생하면 Chromium 버그를 신고해 주세요.