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

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

Опция scrollTo

Каждый шаг Shepherd.js может быть сконфигурирован с параметром scrollTo. Этот параметр управляет поведением прокрутки к элементу, на который указывает шаг. Его можно использовать двумя способами:

  1. Булевое значение

    const tour = new Shepherd.Tour({
  defaultStepOptions: {
    scrollTo: true
  }
});

tour.addStep({
  id: 'step-1',
  text: 'Это первый шаг.',
  attachTo: { element: '#first-element', on: 'bottom' }
});

tour.start();

    При значении true Shepherd автоматически прокрутит страницу так, чтобы целевой элемент оказался видимым, используя стандартный метод scrollIntoView().

  2. Объект конфигурации Можно задать дополнительные параметры для более гибкой прокрутки:

    tour.addStep({
  id: 'step-2',
  text: 'Пример прокрутки с настройками.',
  attachTo: { element: '#second-element', on: 'top' },
  scrollTo: { beh * avior: 'smooth', block: 'center', inline: 'nearest' }
});

    Здесь используется объект с опциями, аналогичными стандартному методу Element.scrollIntoView(). Пояснения параметров:

    • behavior — определяет анимацию прокрутки: 'auto' или 'smooth'.
    • block — вертикальное выравнивание элемента: 'start', 'center', 'end', 'nearest'.
    • inline — горизонтальное выравнивание: 'start', 'center', 'end', 'nearest'.

Прокрутка к динамически создаваемым элементам

Если элемент появляется на странице после загрузки или при взаимодействии пользователя, важно убедиться, что шаг активируется только после того, как элемент доступен в DOM. Для этого можно использовать when и show события:

tour.addStep({
  id: 'dynamic-step',
  text: 'Элемент появился динамически.',
  attachTo: { element: '#dynamic-element', on: 'right' },
  scrollTo: true,
  when: {
    show: () => {
      const elem = document.querySelector('#dynamic-element');
      if (!elem) {
        console.warn('Элемент ещё не доступен');
      }
    }
  }
});

Использование scrollTo совместно с проверкой наличия элемента позволяет избежать ошибок и обеспечивать плавную прокрутку даже в динамических интерфейсах.

Управление смещением прокрутки

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

tour.addStep({
  id: 'offset-step',
  text: 'Прокрутка с отступом сверху.',
  attachTo: { element: '#offset-element', on: 'top' },
  scrollTo: () => {
    const element = document.querySelector('#offset-element');
    const offset = 100; // пикселей
    window.scrollTo({
      top: element.getBoundingClientRect().top + window.scrollY - offset,
      beh * avior: 'smooth'
    });
  }
});

Использование функции для scrollTo позволяет реализовать любые нестандартные сценарии прокрутки, включая сложные вычисления позиции или адаптацию под фиксированные шапки.

Интеграция с кастомными анимациями

Shepherd.js автоматически обрабатывает скролл с базовой анимацией, но при необходимости можно подключить сторонние библиотеки анимации или собственные методы:

tour.addStep({
  id: 'animated-scroll',
  text: 'Прокрутка с кастомной анимацией.',
  attachTo: { element: '#animated-element', on: 'left' },
  scrollTo: () => {
    const element = document.querySelector('#animated-element');
    const top = element.getBoundingClientRect().top + window.scrollY;
    // Используем библиотеку GSAP для плавного скролла
    gsap.to(window, { scrollTo: top, duration: 1 });
  }
});

Такой подход позволяет интегрировать Shepherd.js с современными библиотеками анимаций и создавать визуально привлекательные интерактивные туры.

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

  • Всегда проверять наличие элемента перед запуском прокрутки, особенно в динамических интерфейсах.
  • Использовать beh * avior: 'smooth' для плавного пользовательского опыта.
  • При фиксированных шапках или панелях применять смещение, чтобы элемент не оказался скрытым.
  • Кастомные функции для scrollTo дают полный контроль над поведением прокрутки и позволяют комбинировать её с любыми визуальными эффектами.

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

Оглавление