Автоматическая прокрутка

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

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

  • сохранить текущую позицию;
  • прокрутить страницу к новому фрагменту;
  • принудительно переместить курсор к началу или к конкретному селектору.

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

Сохранение положения

При использовании up.navigate, up.replace или других методов обновления фрагментов позиция скролла сохраняется автоматически, если новое содержимое не требует корректировки. Логика определения основана на принципе: если селектор обновляется в видимой области, нет необходимости принудительно менять положение. Это даёт эффект бесшовной навигации без резких скачков.

Прокрутка к содержимому

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

Управление через атрибуты

up-scroll="reset"

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

up-scroll="target"

Прокручивает так, чтобы начало обновлённого фрагмента оказалось в верхней части окна.

up-scroll="hash"

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

Управление через JavaScript

Метод up.scroll.to() позволяет вручную инициировать прокрутку. Примерный вызов:

up.scroll.to('.section-title', { beh * avior: 'smooth' })

Существуют дополнительные параметры, задающие смещение, скорость и поведение в фиксированных контейнерах.

Прокрутка внутри контейнеров

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

Связь с историей

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

Дефолтные стратегии

Unpoly применяет эвристики:

  • если обновляется основной контейнер страницы, позиция сбрасывается;
  • если обновляется внутренний фрагмент, позиция сохраняется;
  • если активируется якорь, переход происходит к нему;
  • если фрагмент представляет новый документ, применяется up-scroll="reset" автоматически.

Эвристики могут быть переопределены атрибутами или параметрами вызова.

Плавность анимаций

Прокрутка может сопровождаться анимацией. Параметр beh * avior: 'smooth' интегрируется с CSS и стандартным API scroll(). Unpoly избегает собственных анимационных механизмов для прокрутки, чтобы не конфликтовать с другими библиотеками и нативным поведением.

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

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

Рекомендации при проектировании интерфейса

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

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

Взаимосвязь с адаптивным интерфейсом

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

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

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

Работа с длинными страницами

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

Конфликты и переопределения

Другие библиотеки могут вмешиваться в управление скроллом. Unpoly предоставляет хуки и события (up:fragment:loaded, up:location:changed), в которых можно корректировать поведение вручную. При необходимости автопрокрутка может быть отключена или заменена пользовательской логикой.

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

Оглавление