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

Bramus
Free Debreuil
Free Debreuil
LinkedIn

게시일: 2026년 9월 4일

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

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

이 기능은 베타, 개발자, Canary 출시 채널의 Chrome 154에서 개발자 테스트용으로 제공됩니다. 플래그를 사용 설정할 필요가 없습니다.

한 축에서 오버플로를 설정할 때의 특이한 점

이 기능이 없으면 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())를 호출하면 프로그래매틱 스크롤 제약 조건이 적용됩니다. 요소는 클립으로 정의된 축을 따라 프로그래매틱 방식으로 스크롤하지 않습니다.
  • 그리드 및 플렉스 최소 셀 크기: 그리드 및 플렉스 레이아웃의 스크롤 컨테이너의 경우 셀이 사용 가능한 공간에 맞게 조정되도록 기본 최소 크기 (min-width: auto)가 일반적으로 무시됩니다. overflow: clip가 동일한 축에 설정되면 기본 최소 크기가 적용되어 플렉스 또는 그리드 컨테이너가 더 커질 수 있습니다.

기능 감지

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

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

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

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

의견 제공

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

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

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