scrollTo

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

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

scrollTo может принимать несколько видов значений, в зависимости от того, какой эффект прокрутки требуется:

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

При true Shepherd автоматически прокручивает страницу к элементу, к которому привязан шаг. Если false, прокрутки не будет.

  1. Объект с опциями прокрутки
scrollTo: { beh * avior: 'smooth', block: 'center', inline: 'nearest' }

Здесь можно задать детальные параметры для Element.scrollIntoView:

  • behavior — способ прокрутки ('auto' или 'smooth'),
  • block — вертикальное позиционирование элемента в видимой области ('start', 'center', 'end', 'nearest'),
  • inline — горизонтальное позиционирование ('start', 'center', 'end', 'nearest').
  1. Функция обратного вызова
scrollTo: function() {
    return document.querySelector('#custom-target');
}

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

Пример использования

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

tour.addStep({
  title: 'Форма входа',
  text: 'Введите свои учетные данные здесь',
  attachTo: {
    element: '#login-form',
    on: 'bottom'
  }
});

tour.addStep({
  title: 'Кнопка входа',
  text: 'Нажмите, чтобы войти',
  attachTo: {
    element: '#login-button',
    on: 'top'
  },
  scrollTo: true
});

tour.start();

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

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

  • Для длинных страниц рекомендуется использовать { beh * avior: 'smooth', block: 'center' } для плавной прокрутки и комфортного восприятия.
  • Если целевой элемент создаётся динамически, функция обратного вызова позволит вернуть актуальный элемент после рендера.
  • Можно комбинировать scrollTo с параметром attachTo, чтобы шаг корректно позиционировался относительно видимого элемента.
  • При сложной верстке с фиксированными заголовками и панелями стоит учитывать смещение элементов с помощью дополнительного CSS или кастомной функции прокрутки, чтобы контент не перекрывался.

Интеграция с пользовательской прокруткой

Shepherd.js позволяет полностью контролировать прокрутку, используя пользовательские функции. Пример:

scrollTo: function() {
  const element = document.querySelector('#dynamic-element');
  window.scrollTo({
    top: element.offsetTop - 50, // учитываем фиксированное меню
    beh * avior: 'smooth'
  });
  return element;
}

В этом случае шаг тура корректно позиционируется, даже если стандартные параметры scrollIntoView вызывают перекрытие контента фиксированными элементами.

Особенности на мобильных устройствах

  • На мобильных устройствах поведение scrollTo может отличаться из-за виртуальных клавиатур и панелей инструментов.
  • Использование block: 'center' часто приводит к тому, что элемент остаётся видимым и не скрыт за клавиатурой.
  • В сложных случаях рекомендуется комбинировать пользовательские функции прокрутки и scrollTo для достижения предсказуемого результата.

Итоговая структура параметра

scrollTo: boolean | Object | Function
  • boolean — включение или отключение прокрутки по умолчанию.
  • Object — настройка поведения через scrollIntoView.
  • Function — возврат конкретного элемента с возможностью полной кастомизации.

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

Оглавление