Одна ось прокрутки в CSS: Chrome тестирует изменение поведения overflow

Знакомая таблица вскрывает неочевидное правило

Горизонтально прокручиваемая таблица может одновременно нуждаться в закреплённой первой колонке и заголовке, который следует за прокруткой документа. С прежним вычислением overflow родитель неожиданно становился контейнером обеих осей. Поэтому sticky привязывался к нему даже там, где автор ожидал прокрутку страницы. Материал Chrome от 4 сентября описывает расширение, позволяющее совместить прокручиваемое значение на одной оси с clip на другой. Это меняет модель контейнера, а не только скрывает лишнюю полосу на экране.

clip отличается от hidden

В модели CSS Overflow скрытие области и запрет прокрутки — разные решения. Hidden может оставлять возможность программного перемещения, тогда как clip предназначен для обрезания без создания такого поведения. В новом одноосевом варианте родитель учитывается как скроллер только для соответствующей оси. Закреплённая колонка может следовать горизонтальному контейнеру, а заголовок — документу по вертикали. Это позволяет выразить два отношения в CSS, но требует понимания окружающей структуры. Наличие слова clip в стилях ещё не доказывает, что браузер реализует именно пересмотренную модель.

Значения overflow-x и overflow-y участвуют в вычислении друг друга. Поэтому визуальное отсутствие полосы на одной оси не всегда доказывает отсутствие скроллера для этой оси. В старой модели комбинация с visible могла вычисляться в auto; одноосевое изменение вводит явное различие для clip. Программный скролл, цепочка прокрутки и выбор предка sticky опираются на вычисленное поведение. Это объясняет, почему изменение оказывается заметно даже на блоке, который внешне выглядит точно так же, как раньше.

Какие побочные эффекты отмечает команда

В официальном разборе перечислены sticky, overscroll-behavior, программные вызовы прокрутки и размеры ячеек Grid/Flex. На обрезанной оси scrollTo не должен создавать перемещение, а минимальный автоматический размер может снова влиять на компоновку. Для сложного интерфейса это способно изменить фактическую ширину блока. Поэтому проверка должна включать длинное содержимое, клавиатуру и попытки программно показать активный элемент. Исправление одной таблицы может проявить существующие предположения в другом компоненте, использующем тот же контейнер.

Проверка синтаксиса не подтверждает поведение

Chrome рекомендует named-feature(single-axis-scroll-container) для обнаружения именно новой возможности. Простая проверка сочетания overflow: scroll clip говорит лишь о том, что запись распознана. Это важный пример различия между поддержкой грамматики и семантикой. Для приложения, которое должно работать в разных версиях, запасной вариант нужно выбирать по реальной возможности, а не по отсутствию синтаксической ошибки. Черновик CSS Overflow также имеет статус развивающейся спецификации; ссылка на него объясняет модель, но не доказывает внедрение во всех движках.

Одноосевая модель меняет выбор предка

Контекст для sticky выбирается по той оси, по которой элемент закрепляется. Поэтому один и тот же элемент структуры может иметь значение для горизонтального движения, но перестать определять вертикальное. Именно это даёт сочетание горизонтальной таблицы и заголовка, следующего за документом. В других свойствах проявляется та же причина: обрезанная ось больше не считается прокручиваемой и не принимает соответствующие программные перемещения. Автоматические минимальные размеры Grid и Flex снова участвуют в расчёте там, где их прежде подавляло поведение скроллера. В проверенном анонсе изменение доступно для тестирования на предварительных каналах без отдельного включения флага.