Smooth scroll в Unpoly обеспечивает плавный переход к целевым фрагментам страницы без резкого скачка, что повышает читаемость и сглаживает смену контекста при навигации. Механизм интегрируется с системой обновления фрагментов и ссылками, обеспечивая единообразное поведение во всех ключевых сценариях.
Unpoly отслеживает клики по ссылкам и выполняет обновление части
документа с помощью up.link.follow. Если обновление
фрагмента включает в себя позицию прокрутки, библиотека может
автоматически выполнить плавный скролл к нужному элементу или вернуться
к верхней части слоя.
Плавность достигается благодаря упорядоченному сочетанию:
По умолчанию Unpoly стремится прокручивать к началу обновлённого
фрагмента. Поведение регулируется с помощью атрибутов ссылок и опций
up.link:
Ключевые атрибуты:
up-scroll: управляет направлением и логикой
прокрутки;up-restore-scroll: восстанавливает предыдущую позицию
прокрутки при возврате;up-history: контролирует запись состояния прокрутки в
историю.Типичные стратегии:
Unpoly предоставляет API для прямой прокрутки к элементам, минуя
механизмы ссылок. Команда up.scroll.to принимает селектор
или DOM-узел и двигает область просмотра к нему.
Пример ключевых особенностей:
Поддерживается выбор продолжительности, функции сглаживания и отступа, что полезно при фиксированных верхних панелях.
При открытии нового слоя (modal, drawer, overlay) скролл остаётся
локальным для данного слоя. Вложенные слои могут содержать собственные
позиции прокрутки и правила работы со скроллом. Важно учитывать, что
закрытие слоя восстанавливает предыдущее состояние прокрутки родителя
при включённом up-restore-scroll.
Современные приложения требуют корректного восстановления состояния интерфейса при перемещении по истории браузера. Unpoly автоматически сохраняет позицию прокрутки в стек истории, если действие изменяет URL. Возврат назад вызывает восстановление позиции при условии, что обновляется тот же слой без сброса содержимого.
Особенности механизма:
up-history;Плавность прокрутки можно настроить глобально через конфигурацию или точечно при вызове API. Конфигурация определяет базовое поведение, включая:
При необходимости анимация может быть отключена для системных переходов, что улучшает доступность для пользователей с ограничениями по движению интерфейса.
Интерфейсы часто используют фиксированные верхние панели, которые перекрывают часть контента. Unpoly позволяет задавать отступ при прокрутке, чтобы целевой элемент не оказался зафиксирован под панелью. Этот отступ может быть статическим или вычисляться динамически при загрузке фрагмента.
Перемещение фокуса в Unpoly нередко сопровождается прокруткой, особенно при загрузке форм. Smooth scroll в этих сценариях синхронизирует прокрутку и фокусировку элемента, избегая резких скачков и не нарушая процесс ввода.
Smooth scroll органично работает с инкрементальными обновлениями фрагментов. Если перезагружается только часть документа, Unpoly корректно определяет локальное окно прокрутки и выбирает минимально необходимое смещение. Это предотвращает ненужные прыжки даже при больших объёмах динамического контента.
На длинных страницах Unpoly избегает преждевременного скролла до момента, когда новый фрагмент полностью готов и вставлен. Этот приём предотвращает ситуацию, когда браузер прокручивает в промежуточную позицию до завершения рендера. Дополнительно учитываются возможные изменения высоты документа после вставки интерактивных компонентов.
Поведение smooth scroll может быть переопределено в зависимости от контекста. Ключевые параметры:
Гибкий контроль позволяет выстраивать единообразные паттерны в интерфейсах независимо от количества слоёв, динамических компонентов и способов навигации.
Unpoly учитывает системные настройки
prefers-reduced-motion и отключает анимацию скролла для
пользователей, которые предпочитают минимальные движения интерфейса. Это
снижает нагрузку на пользователей с повышенной чувствительностью к
анимациям и соответствует требованиям по доступности.
Плавная прокрутка поддерживается при переходах по якорям внутри страницы и при загрузке новых фрагментов, указывающих якорь в URL. Такие переходы корректно работают в сочетании с историей браузера и вложенными слоями.
Smooth scroll становится особенно ценным в интерфейсах, приближенных к SPA, когда множество переходов не сопровождаются полной перезагрузкой документа. Последовательная прокрутка поддерживает ощущение структурно связанного контента и помогает ориентироваться на странице без избыточных визуальных сигналов.
Smooth scroll выступает не как декоративная анимация, а как функциональный элемент управления вниманием и контекстом при работе с динамическими страницами.