Summary

  • Когда вложенная область доходит до края, браузер может передать дальнейшую прокрутку её предку. Чат стоит на месте, а статья под ним внезапно уезжает.
  • contain удерживает жест внутри области, но допускает местный отклик на краю; none убирает и этот отклик. Различие видно читателю, а не только разработчику в таблице свойств.

На странице большая статья и маленькая панель сообщений. Читатель доходит до последней реплики, прокручивает ещё немного и теряет из виду абзац статьи. Первый открытый рабочий проект W3C 2019 года объясняет механизм через цепочку прокрутки: жест начинается во вложенном контейнере и на его границе может продолжиться в контейнере-предке. Браузер выполнил правило. Человек же хотел дочитать чат, а получил экскурсию по соседней странице.

Сайт мог поставить на границе сторожа из JavaScript: слушать события колеса и касания, а в нужный момент вызывать preventDefault(). Проект перечисляет издержки такого решения. Непассивный обработчик вынуждает браузер ждать решения скрипта и может задерживать прокрутку. Полная отмена события способна остановить даже нормальное движение до края. К тому же на краю возможны две реакции: небольшая упругая подсказка внутри панели и передача движения наружу. Читатель может желать первой, не желая второй. Грубая отмена плохо различает эти желания.

Протокол заседания рабочей группы CSS в декабре 2016 года показывает ещё незавершённый замысел. Свойство называли scroll-boundary-behavior, продолжая более раннюю идею Microsoft. Tab Atkins сформулировал вопрос: достигнув верха или низа, должно ли намерение прокрутки «сбежать» из области? Simon Fraser напомнил о закреплении цели на время одного жеста и о риске запереть пользователя в части страницы. Чат, дошедший до конца сообщений, обсуждался как конкретный случай. Группа поддержала стандартизацию, но не приняла тогда окончательного решения: нужны были примеры и лучшие названия.

Затем предложение развивалось в WICG. В январе 2018 года редактор Majid Valipour попросил перенести overscroll-behavior в проекты рабочей группы CSS. В обращении отражено состояние реализации в браузерах на тот момент. Главное движение произошло в другом месте: хитрость для одного виджета становилась общим договором между автором страницы и браузером. Автор задаёт границу, а браузер по-прежнему ведёт жест.

История публикаций W3C указывает 6 июня 2019 года как дату первого открытого рабочего проекта. В нём действия на границе разделены на местные и выходящие наружу. Подсветка или пружинящий эффект в чате относятся к первым; прокрутка родительской страницы и навигация — ко вторым. auto оставляет обычное поведение браузера. contain запрещает выход наружу, сохраняя возможность местного сигнала. none выключает и его. Чату полезно показать, что список кончился. Бесконечной ленте, которая подгружает записи, иногда нужен более спокойный край. Одна и та же граница может обслуживать разные задачи.

Важным оказался и вопрос направления. Физические оси x и y не всегда совпадают с логикой расположения текста. На берлинском заседании в апреле 2018 года группа решила добавить варианты block и inline. Так правило следует направлению письма, а не представлению разработчика об одной «нормальной» странице. Для издания с десятью самостоятельно написанными языковыми версиями эта деталь совсем не декоративна.

В проекте рядом стоят неподвижная боковая навигация, собственное обновление жестом вниз и бесконечный список. У каждого края своя работа. В случае с чатом задача скромна: последняя реплика заканчивает разговор, а статья остаётся там, где её оставили.