Передача параметров в коллбэки

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

Основные типы коллбэков

before – вызывается перед началом анимации прокрутки.
after – вызывается после завершения анимации.
cancel – срабатывает при прерывании анимации пользователем.
complete – универсальный коллбэк, срабатывающий после завершения или прерывания анимации.

Каждый из этих коллбэков принимает объект события, а также может принимать дополнительные параметры, переданные при инициализации Smooth Scroll или при вызове метода animateScroll().

Передача пользовательских данных в коллбэки

Smooth Scroll предоставляет возможность передачи дополнительных данных через объект настроек. Пример структуры настроек:

const scroll = new SmoothScroll('a[href*="#"]', {
    speed: 800,
    offset: 100,
    before: function(anchor, toggle, options, customData) {
        console.log('Начало прокрутки к', anchor);
        console.log('Пользовательские данные:', customData);
    },
    after: function(anchor, toggle, options, customData) {
        console.log('Прокрутка завершена к', anchor);
        console.log('Пользовательские данные:', customData);
    }
});

anchor – целевой элемент якоря.
toggle – элемент, инициирующий прокрутку (например, <a>).
options – объект текущих настроек Smooth Scroll.
customData – произвольные данные, передаваемые для использования внутри коллбэка.

Для передачи customData можно использовать дополнительное поле в объекте настроек или параметр при вызове метода animateScroll():

scroll.animateScroll(document.querySelector('#section2'), null, {
    speed: 1000,
    customData: { sectionId: 2, highlight: true }
});

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

Контекст вызова коллбэков

Smooth Scroll гарантирует правильный контекст (this) внутри коллбэков. Он указывает на экземпляр Smooth Scroll, что позволяет обращаться к его методам и свойствам:

const scroll = new SmoothScroll('a[href*="#"]', {
    after: function(anchor, toggle, options) {
        this.animateScroll(document.querySelector('#top'));
    }
});

Такой подход полезен для построения цепочек скроллов или автоматического возврата к началу страницы после завершения текущей анимации.

Использование стрелочных функций и параметров

При использовании стрелочных функций стоит учитывать, что this не привязывается к экземпляру библиотеки. Если требуется доступ к методам Smooth Scroll, лучше использовать обычную функцию:

const scroll = new SmoothScroll('a[href*="#"]', {
    after: (anchor, toggle, options) => {
        console.log('Стрелочная функция:', anchor);
        // this.animateScroll(...) здесь недоступен
    }
});

Для передачи дополнительных параметров в стрелочной функции можно использовать замыкание:

const customData = { color: 'red', speedModifier: 1.2 };

const scroll = new SmoothScroll('a[href*="#"]', {
    after: (anchor, toggle, options) => {
        console.log('Параметры через замыкание:', customData);
    }
});

Практические сценарии передачи параметров

Динамическая подсветка активной секции:

scroll.animateScroll(sectionElement, null, {
    customData: { highlightClass: 'active-section' },
    after: function(anchor, toggle, options, data) {
        anchor.classList.add(data.highlightClass);
    }
});

Запуск анимации внутри секции после скролла:

scroll.animateScroll(document.querySelector('#portfolio'), null, {
    customData: { animation: 'fadeInUp' },
    after: function(anchor, toggle, options, data) {
        anchor.querySelectorAll('.item').forEach(el => {
            el.classList.add(data.animation);
        });
    }
});

Передача параметров между коллбэками:

const sharedData = { startTime: null };

scroll.animateScroll('#section3', null, {
    before: function() { sharedData.startTime = Date.now(); },
    after: function() {
        const duration = Date.now() - sharedData.startTime;
        console.log('Время прокрутки:', duration, 'мс');
    }
});