Скроллинг к элементу

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

Основные параметры скроллинга

  1. scrollIntoViewOptions Позволяет управлять поведением скроллинга к элементу. Поддерживает все стандартные параметры метода Element.scrollIntoView(), включая:

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

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

    const driver = new Driver({
    scrollIntoViewOptions: {
        beh * avior: 'smooth',
        block: 'center',
        inline: 'center'
    }
});

  2. Автоматический скроллинг к шагу Каждое определение шага может содержать параметр element, к которому будет осуществлен скроллинг. Driver.js автоматически вызывает скроллинг перед отображением подсказки, если элемент не полностью виден.

    driver.defineSteps([
    {
        element: '#profile-button',
        popover: {
            title: 'Профиль',
            description: 'Здесь отображается информация о пользователе.'
        }
    }
]);
driver.start();

Управление поведением скроллинга для отдельных шагов

Для каждого шага можно переопределить глобальные настройки скроллинга, передав свой объект scrollIntoViewOptions:

driver.defineSteps([
    {
        element: '#settings',
        popover: {
            title: 'Настройки',
            description: 'Здесь настраиваются параметры приложения.'
        },
        scrollIntoViewOptions: {
            beh * avior: 'smooth',
            block: 'start'
        }
    }
]);

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

Прерывание скроллинга и управление фокусом

Иногда необходимо остановить скроллинг или отключить его для определенных шагов. Для этого можно использовать onBeforeStep или onNext с кастомной логикой:

driver.on('beforeStep', (step) => {
    if (step.element.id === 'no-scroll-element') {
        // Пропускаем автоматический скроллинг
        step.scrollIntoViewOptions = { beh * avior: 'auto', block: 'nearest' };
    }
});

Это особенно важно для элементов, закрепленных в фиксированных контейнерах, где стандартный скроллинг может привести к некорректной позиции подсказки.

Скроллинг внутри контейнеров с прокруткой

Driver.js корректно работает со всеми элементами, находящимися внутри контейнеров с overflow: auto или overflow: scroll. Для достижения нужного эффекта важно учитывать:

  • Указывать правильный селектор контейнера.
  • Использовать block: 'center' или 'nearest' для минимизации смещения подсказки.

Пример:

driver.defineSteps([
    {
        element: '#scrollable-container .item-10',
        popover: {
            title: 'Элемент внутри контейнера',
            description: 'Скроллинг происходит внутри родительского блока.'
        },
        scrollIntoViewOptions: {
            beh * avior: 'smooth',
            block: 'center'
        }
    }
]);

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

Для достижения максимально гладкого эффекта можно комбинировать параметры behavior и block. beh * avior: "smooth" обеспечивает анимацию, а block: "center" гарантирует, что элемент окажется по центру видимой области, что улучшает восприятие руководства.

Оглавление