Готово к тестированию разработчиками: контейнеры с прокруткой по одной оси.

Bramus

Free Debreuil

Опубликовано: 4 сентября 2026 г.

Функция "контейнеры прокрутки по одной оси" расширяет свойство CSS overflow , поддерживая значения прокрутки ( auto , scroll , hidden ) в сочетании с clip (например, overflow: scroll clip ), в результате чего получаются контейнеры прокрутки только по одной оси.

Хотя это изменение открывает доступ к таким востребованным функциям, как фиксированное позиционирование по осям, оно также вносит дополнительные побочные эффекты в другие функции, зависящие от прокрутки. Из-за этих потенциальных рисков совместимости мы просим разработчиков протестировать свои веб-сайты и предоставить отзывы, прежде чем эта функция будет внедрена в стабильные каналы.

Эта функция доступна для тестирования разработчиками в Chrome 153 на каналах выпуска Beta, Dev и Canary. Включать соответствующий флаг не требуется.

Особенность настройки переполнения по одной из осей.

Без этой функции было невозможно создать действительно одноосевой контейнер прокрутки с помощью CSS. Если вы настроите одну ось на прокрутку, пытаясь при этом сохранить видимой другую ось (например, установив overflow-x: scroll и оставив overflow-y: visible ), механизм стилей браузера автоматически заставит видимую ось вычисляться как auto (или scroll ). Это создаст двумерный скроллер, даже если вы этого не планировали.

Эта особенность становится особенно заметной при попытке создать таблицу с фиксированной верхней строкой и фиксированным первым столбцом. В следующем примере цель состоит в том, чтобы первый столбец прикреплялся к элементу .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 фактически становится двумерным скроллером. Поэтому, когда 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() ) для контейнера с одноосевой прокруткой теперь обеспечивает программные ограничения прокрутки. Элемент откажется программно прокручиваться вдоль оси, определенной как clip.
• Минимальный размер ячеек в сетке и гибкой компоновке : для контейнеров с прокруткой в ​​сетке и гибкой компоновке минимальный размер по умолчанию ( min-width: auto ) обычно игнорируется, чтобы позволить ячейкам адаптироваться к доступному пространству. Если на той же оси установлен overflow: clip , начнет действовать минимальный размер по умолчанию, что потенциально может привести к увеличению размера контейнера в сетке или гибкой компоновке.

Обнаружение признаков

Для определения поддержки контейнеров с одноосевой прокруткой используйте ключевое слово single-axis-scroll-container в правиле @supports named-feature() .

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

Как обсуждалось в задаче #13677 рабочей группы CSSWG , использование named-feature(single-axis-scroll-container) является рекомендуемым стандартным способом обнаружения этой возможности, поскольку проверка только с помощью @supports (overflow: scroll clip) — это лишь проверка парсинга, которая не определяет, корректно ли браузер обрабатывает измененное поведение прокрутки по одной оси.

В JavaScript для выполнения этой проверки используйте CSS.supports("named-feature(single-axis-scroll-container)") .

Требуется обратная связь.

Для оценки потенциальных рисков совместимости было проведено тестирование на 190 веб-сайтах . На основании этого анализа, изменения, по-видимому, не приводят к каким-либо существенным сбоям.

Однако, поскольку контейнеры с одноосевой прокруткой принципиально меняют способ оценки контекста прокрутки, область применения расширяется. Вам предлагается протестировать веб-сайты и веб-приложения в нестабильных каналах Chrome , чтобы помочь выявить любые частные случаи до того, как эта функция будет внедрена в стабильную версию.

Если у вас начнут возникать проблемы или вы столкнетесь с неожиданным поведением прокрутки, пожалуйста, сообщите об ошибке в Chromium .

Ссылки и ресурсы

• Контейнеры прокрутки с одной осью (пояснение)
• CSS-свойство ` position: sticky теперь прикрепляется к ближайшему элементу прокрутки по каждой оси!
• Обнаружение "необнаруживаемых" функций CSS с помощью аннотации @supports named-feature()