Summary

  • Первый публичный черновик W3C 2015 года использовал фотоальбом, чтобы объяснить неловкую остановку после неточного жеста, и предложил точки, где может остановиться прокручиваемый контейнер.
  • Последующие тексты разделили силу притяжения, задаваемую контейнером, и выравнивание, задаваемое элементами. Движение и окончательную остановку выполняет браузер.

Фоторедактор подготовила серию снимков. На большом экране они ровно стоят в ряд; на телефоне виден один кадр за раз. Читатель проводит пальцем чуть дальше нужного, и окно застывает между двумя снимками. Можно посадить сайт за руль целиком: придумать кнопки и самому вычислять каждый переход. CSS Scroll Snap оставил руль браузеру, предложив лишь карту разумных стоянок. Такой договор сохраняет привычное движение пальца.

Первый публичный черновик от 26 марта 2015 года назывался CSS Scroll Snap Points. Он прямо приводил альбом как пример: касание или колесо мыши дают приблизительное смещение, и страница может оказаться видна наполовину. Документ вводил точки, в которых видимое окно контейнера может отдохнуть после завершения прокрутки. При mandatory оно должно оказаться на точке, если это возможно; при proximity агент пользователя решает, достаточно ли она близка. Точки могли повторяться вдоль оси или задаваться элементами. Редактор отмечала места, браузер ставил машину.

В протоколе рабочей группы CSS за декабрь 2015 года видна переделка чертежа. Matt Rakow объединял области и выравнивание; группа решила заменить старую координату на scroll-snap-align и область привязки, а прежний пункт назначения — на padding. На встрече в Сан-Франциско в мае 2016 года обсуждали снимки крупнее окна, невидимые точки и области, до которых невозможно добраться. Идеальная линия на плане парковки бесполезна, если место находится за стеной.

Черновик от 23 июня 2016 года объяснял остановку через выравнивание. Контейнер задавал правило посредством scroll-snap-type, а фотография через scroll-snap-align указывала, какая её сторона или центр должны встретиться с окном. Можно выставить снимок по центру, не измеряя скорость пальца в коде сайта. Точную анимацию и физику документ оставлял браузеру. На примере длинной страницы он показывал пользу proximity: иногда читатель хочет остановиться посреди раздела. Обязательный прыжок к очередной отметке сделал бы из страницы слишком настойчивого экскурсовода.

В Candidate Recommendation от 14 августа 2018 года разделение обязанностей уточняли scroll-snap-type, scroll-snap-align, scroll-padding и scroll-margin. Отступы меняют рабочую рамку: постоянная шапка страницы может занимать верхний край, и фотографию следует показать ниже неё. Это решения о композиции, а не просьба к редакции построить собственный двигатель прокрутки.

Candidate Recommendation от 11 марта 2021 года продолжала модель и описывала выбор подходящей конечной позиции. Читатель запускает прокрутку, таблица стилей предлагает выравнивания, браузер завершает движение. Для короткой фотоленты строгая остановка может быть удобной. Для длинного текста место между отметками порой важнее самой отметки. Разница между mandatory и proximity ощутима в чтении, а не только в исходном файле.

История публикаций W3C связывает этапы 2015, 2016, 2018 и 2021 годов. Эта история касается конца прокрутки, которую читатель начал сам. В другой истории, Scroll Anchoring, браузер удерживает позицию, когда сверху поздно появляется новый материал. Здесь фоторедактор расставляет кадры, читатель перелистывает их, а браузер не паркуется поперёк двух фотографий.