Работа с элементами вне viewport

Driver.js предоставляет встроенные механизмы для автоматического фокусирования на элементах интерфейса, включая те, которые изначально находятся вне видимой области окна браузера. Основным инструментом здесь является автоматическая прокрутка (scrollIntoView), которая обеспечивает корректное отображение выделяемого элемента в центре или в нужной позиции экрана.

Настройка прокрутки при создании шага

Каждый шаг в Driver.js описывается объектом с параметрами:

const steps = [
  {
    element: '#target-element',
    popover: {
      title: 'Заголовок',
      description: 'Описание действия с элементом',
      position: 'top'
    },
    onNext: () => console.log('Переход к следующему шагу')
  }
];

Чтобы элемент автоматически прокручивался в видимую область, можно использовать свойство scrollIntoViewOptions:

const steps = [
  {
    element: '#target-element',
    popover: { title: 'Элемент вне экрана', description: 'Этот элемент будет виден после прокрутки', position: 'bottom' },
    scrollIntoViewOptions: { beh * avior: 'smooth', block: 'center', inline: 'nearest' }
  }
];
  • behavior: 'smooth' или 'auto'. 'smooth' создаёт плавную анимацию прокрутки.
  • block: 'start', 'center', 'end', 'nearest'. Определяет вертикальное выравнивание элемента после прокрутки.
  • inline: 'start', 'center', 'end', 'nearest'. Аналогично для горизонтальной прокрутки.

Принудительная прокрутка без вызова scrollIntoView

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

const steps = [
  {
    element: '#dynamic-element',
    popover: { title: 'Динамический элемент', description: 'Прокручиваем вручную', position: 'top' },
    onBeforeStart: (element) => {
      const headerOffset = 80;
      const elementPosition = element.getBoundingClientRect().top + window.scrollY;
      window.scrollTo({ top: elementPosition - headerOffset, beh * avior: 'smooth' });
    }
  }
];
  • onBeforeStart вызывается перед активацией шага и позволяет точно позиционировать элемент в видимой области.
  • headerOffset учитывает фиксированные элементы интерфейса, которые могут закрывать цель.

Работа с элементами в модальных окнах

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

  1. Убедиться, что контейнер с элементом видим (display: block) перед запуском шага.
  2. Использовать onBeforeStart для принудительного открытия модального окна:
const steps = [
  {
    element: '#modal-button',
    popover: { title: 'Кнопка внутри модального окна', description: 'Сначала откроем окно', position: 'right' },
    onBeforeStart: () => document.querySelector('#modal').classList.add('open')
  }
];
  1. После открытия модального окна элемент автоматически прокрутится в центр, если включена опция scrollIntoViewOptions.

Настройка глобальных параметров прокрутки

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

const driver = new Driver({
  scrollIntoViewOptions: { beh * avior: 'smooth', block: 'center', inline: 'nearest' },
  padding: 10
});
driver.defineSteps(steps);
driver.start();
  • padding задаёт расстояние между элементом и краями видимой области после прокрутки.
  • Глобальные параметры перекрывают стандартное поведение всех шагов, если они не переопределены на уровне конкретного шага.

Особенности работы с длинными страницами и горизонтальной прокруткой

  1. Для элементов, находящихся далеко вниз по странице, важно устанавливать block: 'center', чтобы элемент не прилипал к верхней границе.
  2. Для элементов внутри горизонтально прокручиваемых контейнеров следует указывать inline: 'center'.
  3. При сложной структуре с вложенными скроллами иногда требуется дополнительно вызвать scrollIntoView на родительских контейнерах через onBeforeStart.

Управление событиями после прокрутки

Driver.js позволяет выполнять действия после завершения прокрутки:

const steps = [
  {
    element: '#after-scroll',
    popover: { title: 'После прокрутки', description: 'Выполняем действие', position: 'bottom' },
    onNext: () => console.log('Элемент теперь виден и готов к взаимодействию')
  }
];
  • onNext выполняется после отображения поповера и гарантирует, что элемент уже в видимой области.
  • Можно комбинировать с асинхронными функциями для ожидания завершения анимации.

Резюме по ключевым моментам

  • scrollIntoViewOptions управляет позицией элемента в видимой области.
  • onBeforeStart обеспечивает гибкую и точную прокрутку, учитывая динамические элементы.
  • Для модальных окон и скрытых контейнеров необходимо предварительно сделать элемент видимым.
  • Глобальные настройки прокрутки применяются ко всем шагам, если не переопределены локально.
  • Поддержка вертикальной и горизонтальной прокрутки позволяет корректно работать с любыми интерфейсными элементами вне viewport.

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

Оглавление