Параметр scrollTo

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

Типы значений scrollTo

  1. Булевое значение (true / false)

    • true — шаг автоматически скроллится к целевому элементу. Если элемент уже виден, скролл может быть минимальным или отсутствовать.
    • false — прокрутка отключена. Элемент может быть вне видимой области экрана, и пользователь должен прокрутить страницу вручную.

  2. Объект конфигурации Shepherd.js позволяет передавать объект, который контролирует детали прокрутки. Основные свойства объекта:

    • behavior — тип анимации скролла ('auto' или 'smooth').
    • block — вертикальное позиционирование элемента в окне ('start', 'center', 'end', 'nearest').
    • inline — горизонтальное позиционирование ('start', 'center', 'end', 'nearest').

Пример использования объекта:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    scrollTo: {
      beh * avior: 'smooth',
      block: 'center',
      inline: 'nearest'
    },
    cancelIcon: {
      enabled: true
    },
    classes: 'custom-tour-step',
  }
});

tour.addStep({
  id: 'step-1',
  text: 'Это пример шага с прокруткой.',
  attachTo: {
    element: '#element1',
    on: 'bottom'
  }
});

В этом примере шаг будет плавно прокручиваться к элементу #element1 и располагаться по центру видимой области.

Особенности работы scrollTo

  • Автоматическое определение видимости: если элемент полностью виден в окне, Shepherd.js может игнорировать скролл.
  • Анимация: использование 'smooth' делает переход более естественным для пользователя.
  • Поддержка динамически загружаемых элементов: при появлении элементов через JavaScript после загрузки страницы scrollTo корректно работает, если шаг добавляется после появления элемента.
  • Влияние на позиционирование тултипа: корректная прокрутка обеспечивает правильное отображение стрелки и тултипа по отношению к элементу.

Взаимодействие с другими параметрами шага

  1. attachTo Прокрутка всегда ориентирована на элемент, указанный в attachTo.element. Если элемента нет или он скрыт, прокрутка может не сработать.

  2. advanceOn Если шаг автоматически продвигается после события, scrollTo гарантирует, что элемент будет виден перед срабатыванием события.

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

tour.addStep({
  id: 'step-async',
  text: 'Шаг с асинхронным элементом.',
  attachTo: { element: '#asyncElement', on: 'top' },
  beforeShowPromise: () => fetchData().then(() => console.log('Данные загружены')),
  scrollTo: { beh * avior: 'smooth', block: 'start' }
});

Советы по использованию

  • Для длинных страниц рекомендуется использовать block: 'center', чтобы элемент располагался в центре окна и оставался видимым.
  • В мобильных интерфейсах 'smooth' прокрутка делает взаимодействие более комфортным.
  • Если шаги с одинаковым элементом повторяются, стоит оставить scrollTo: false для повторных шагов, чтобы не создавать лишних анимаций.
  • При использовании модальных окон и контейнеров с прокруткой (overflow: auto) нужно указывать правильный родительский контейнер, так как scrollTo по умолчанию работает относительно окна браузера.

Примеры сложных сценариев

Прокрутка внутри контейнера с ограниченной высотой:

tour.addStep({
  id: 'step-scroll-container',
  text: 'Шаг внутри контейнера.',
  attachTo: { element: '#scrollContainer .target', on: 'right' },
  scrollTo: { beh * avior: 'smooth', block: 'nearest' }
});

В этом случае scrollTo корректно работает внутри контейнера с прокруткой, не трогая всю страницу.

Отключение прокрутки для фиксированных элементов:

tour.addStep({
  id: 'step-fixed',
  text: 'Фиксированный элемент на экране.',
  attachTo: { element: '#fixedHeader', on: 'bottom' },
  scrollTo: false
});

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

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

Оглавление