Сохранение позиции

Сохранение позиции в Unpoly обеспечивает плавное обновление контента без сброса прокрутки и состояния интерфейса. Механизм применяется при замене частей страницы, когда важно не нарушить взаимодействие пользователя с текущим контекстом.

Unpoly обновляет сегменты документа через up.layer, up.fragment и навигационные методы. При частичной замене фрагмента библиотека старается сохранить:

  • позицию прокрутки окна или контейнера;
  • фокус ввода;
  • состояние выделения текста.

Такое поведение снижает когнитивные нагрузки при асинхронной навигации и улучшает воспринимаемость данных.

Контроль позиции прокрутки

Для явного управления используются атрибуты up-scroll и расширенные параметры навигации. При обновлении фрагментов допускается:

  • удержание текущей позиции;
  • перемещение на начало фрагмента;
  • прокрутка к конкретному селектору.

Ключевые параметры

  • scroll: true — сохраняет текущее положение.
  • scroll: 'reset' — откатывает прокрутку к началу заменяемого блока.
  • scroll: selector — прокручивает к элементу, заданному селектором.

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

Контейнеры с собственной прокруткой

Сохранение позиции актуально не только для окна браузера, но и для вложенных контейнеров с overflow. Unpoly отслеживает положение каждого прокручиваемого блока и восстанавливает его после обновления. Это делает интерфейс устойчивым при работе с вкладками, таблицами и панелями.

Для сложных областей прокрутки применяется up-scroll-context, указывающий библиотеке, какой контейнер следует считать контекстом позиции. В таких случаях обновление дочерних фрагментов не влияет на глобальную прокрутку и не ломает ориентацию пользователя.

Сохранение позиции при навигации

При посещении новых адресов и возврате назад Unpoly учитывает историю позиций. Это обеспечивает эффект традиционной навигации браузера, несмотря на асинхронные обновления. Переход вперёд или назад восстанавливает прежнюю прокрутку и фокус, если обновления происходят в пределах одного слоя.

При смене слоёв (например, открытие модального окна) позиция сохраняется на нижнем слое, а после закрытия восстанавливается автоматически.

Отложенное восстановление

Некоторые операции требуют пересоздания элементов DOM. Если целевой фрагмент перерисовывается асинхронно, Unpoly откладывает восстановление позиции до момента закрепления DOM. Такой подход предотвращает рывки интерфейса и снижает вероятность конфликтов между событиями рендеринга и прокрутки.

Взаимодействие с анимациями

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

Практика применения

Сохранение позиции особенно востребовано в ситуациях:

  • динамическая пагинация и ленивая подгрузка данных;
  • обновление строк таблиц после действий (архивация, редактирование, удаление);
  • частичное обновление панели фильтров или сортировки;
  • навигация между карточками, не теряющая текущий контекст.

В отличие от традиционных SPA-решений, Unpoly не требует ручного отслеживания и синхронизации прокрутки, что снижает объём вспомогательной логики.

Ограничения и особенности

  • Для корректной работы требуется уникальность селекторов обновляемых фрагментов.
  • Некорректные CSS-правила могут блокировать восстановление позиции внутри контейнера.
  • Изменение размеров контента после запроса может потребовать дополнительной корректировки прокрутки, особенно при подгрузке изображений.

Итоговое влияние на UX

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