Настройка поведения прокрутки

Shepherd.js предоставляет гибкие возможности управления прокруткой страницы во время шагов руководства. Корректная настройка прокрутки критически важна для создания плавного и логичного пользовательского опыта, особенно при работе с длинными страницами или динамическим контентом.

Опции прокрутки

В Shepherd.js контроль над прокруткой осуществляется через свойства, определяемые для шагов (step). Основные опции:

  • scrollTo – определяет элемент или координаты, к которым будет происходить прокрутка. Может быть задан как строковый селектор CSS, DOM-элемент, объект с координатами {x, y} или функция, возвращающая любой из этих типов.

  • scrollToHandler – функция, которая полностью контролирует процесс прокрутки. При вызове получает целевой элемент и параметры шага. Это позволяет реализовать кастомные анимации или использовать сторонние библиотеки прокрутки, например GSAP или ScrollMagic.

  • scrollToOptions – объект с настройками поведения прокрутки, который передаётся внутрь стандартной функции прокрутки scrollIntoView. Основные поля:

    • behavior – 'auto' или 'smooth' (по умолчанию 'smooth'), определяет тип анимации.
    • block – 'start', 'center', 'end', 'nearest'; задаёт вертикальное выравнивание элемента после прокрутки.
    • inline – 'start', 'center', 'end', 'nearest'; задаёт горизонтальное выравнивание.

Пример стандартной настройки прокрутки:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    scrollTo: { beh * avior: 'smooth', block: 'center' }
  }
});

tour.addStep({
  title: 'Пример шага',
  text: 'Этот шаг прокручивается к центру экрана.',
  attachTo: { element: '#feature', on: 'bottom' }
});

Управление поведением при динамическом контенте

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

tour.addStep({
  title: 'Асинхронный элемент',
  text: 'Прокрутка с учётом динамического контента.',
  attachTo: { element: '#dynamic', on: 'top' },
  scrollToHandler: (target) => {
    // Использование кастомной анимации через GSAP
    gsap.to(window, {
      scrollTo: { y: target, offsetY: 50 },
      duration: 1
    });
  }
});

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

Настройка блокировки прокрутки

В некоторых случаях необходимо запретить автоматическую прокрутку для конкретного шага. Для этого scrollTo можно установить в false:

tour.addStep({
  title: 'Без прокрутки',
  text: 'Этот шаг не изменяет позицию экрана.',
  attachTo: { element: '#no-scroll', on: 'right' },
  scrollTo: false
});

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

Комбинирование с анимацией и переходами

Shepherd.js корректно работает с CSS-переходами и анимациями элементов. Для плавной интеграции рекомендуется задерживать вызов прокрутки до завершения анимации контента:

tour.addStep({
  title: 'Анимация элемента',
  text: 'Пример с задержкой прокрутки после анимации.',
  attachTo: { element: '#animated', on: 'top' },
  scrollToHandler: (target) => {
    setTimeout(() => {
      target.scrollIntoView({ beh * avior: 'smooth', block: 'center' });
    }, 300); // задержка на 300 мс для завершения анимации
  }
});

Горизонтальная прокрутка

Хотя основное внимание уделяется вертикальной прокрутке, Shepherd.js поддерживает и горизонтальную. Для этого используется параметр inline внутри scrollToOptions:

tour.addStep({
  title: 'Горизонтальная прокрутка',
  text: 'Шаг с прокруткой по горизонтали.',
  attachTo: { element: '#horizontal', on: 'bottom' },
  scrollTo: {
    beh * avior: 'smooth',
    block: 'center',
    inline: 'center'
  }
});

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

Практические рекомендации

  • Всегда учитывать фиксированные элементы (шапки, панели), используя смещение в scrollToHandler.
  • Для динамически создаваемых элементов использовать кастомные функции прокрутки.
  • Отключать прокрутку там, где шаг полностью видим, чтобы избежать дергания интерфейса.
  • Комбинировать с CSS-анимациями и таймерами для плавного визуального опыта.

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

Оглавление