after - после завершения прокрутки

Smooth Scroll предоставляет возможность отслеживать момент завершения анимации прокрутки с помощью колбэка after. Это событие срабатывает после того, как элемент полностью достиг целевой позиции, позволяя выполнять дополнительную логику, запускать анимации, изменять DOM или обновлять интерфейс.

Синтаксис

При инициализации Smooth Scroll через конструктор можно указать объект опций, среди которых ключ after принимает функцию:

const scroll = new SmoothScroll('a[href*="#"]', {
    speed: 800,
    offset: 50,
    after: function (anchor, toggle) {
        console.log('Прокрутка завершена');
        console.log('Целевой элемент:', anchor);
        console.log('Элемент, вызвавший прокрутку:', toggle);
    }
});
  • anchor — элемент, к которому выполнена прокрутка.
  • toggle — элемент, который инициировал прокрутку (например, ссылка <a>).

Функция after вызывается после окончания анимации, вне зависимости от того, был ли указан смещение (offset) или плавная прокрутка прерывалась.

Применение для изменения стилей после прокрутки

Частая задача — изменять вид целевого элемента после прокрутки. Например, можно добавить класс для подсветки секции:

after: function(anchor, toggle) {
    document.querySelectorAll('.section').forEach(section => section.classList.remove('active'));
    anchor.classList.add('active');
}

Таким образом, только текущая секция будет подсвечена после того, как страница дойдет до неё.

Использование с динамическими элементами

Если страница содержит элементы, которые создаются динамически, важно учитывать, что after выполняется только для уже существующих в DOM элементов, на которые настроена прокрутка. Чтобы обрабатывать новые элементы, необходимо инициализировать Smooth Scroll повторно после добавления элементов:

const scroll = new SmoothScroll('a[href*="#"]', { after: callback });

function callback(anchor, toggle) {
    console.log('Новая секция достигнута:', anchor.id);
}

// После динамического добавления ссылок
scroll.destroy(); // Удаление старых обработчиков
const scrollUpdated = new SmoothScroll('a[href*="#"]', { after: callback });

Асинхронные действия в after

Функция after может содержать асинхронный код, например, загрузку данных или запуск анимации через setTimeout или промисы:

after: async function(anchor, toggle) {
    await fetchDataForSection(anchor.id);
    anchor.classList.add('loaded');
}

Важно помнить, что Smooth Scroll не ожидает завершения асинхронного кода, он лишь сообщает, что прокрутка завершена, а дальнейшие действия выполняются уже независимо.

Комбинация с другими колбэками

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

const scroll = new SmoothScroll('a[href*="#"]', {
    before: function(anchor, toggle) {
        toggle.classList.add('clicked');
    },
    after: function(anchor, toggle) {
        anchor.classList.add('active');
        toggle.classList.remove('clicked');
    }
});

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

Практические советы

  • Всегда проверять существование элементов, перед тем как выполнять действия в after.
  • Использовать after для запуска анимаций, подгрузки контента или изменения классов.
  • Для повторного применения после динамических изменений DOM пересоздавать экземпляр Smooth Scroll.
  • При асинхронных задачах помнить, что прокрутка уже завершена, и отложенные операции не блокируют интерфейс.

Примеры применения

  1. Подсветка активной секции меню
after: function(anchor) {
    document.querySelectorAll('.menu__link').forEach(link => link.classList.remove('active'));
    document.querySelector(`.menu__link[href="#${anchor.id}"]`).classList.add('active');
}
  1. Запуск анимации контента секции
after: function(anchor) {
    const animItems = anchor.querySelectorAll('.animate');
    animItems.forEach(item => item.classList.add('animate--start'));
}
  1. Прокрутка с уведомлением внешних скриптов
after: function(anchor) {
    window.dispatchEvent(new CustomEvent('sectionVisible', { detail: { id: anchor.id } }));
}

Использование after превращает Smooth Scroll не просто в инструмент плавной прокрутки, но и в сигнальную точку, на которую можно навесить любые действия после достижения элемента.

Оглавление