Структура конфигурационного объекта

Библиотека Smooth Scroll для JavaScript реализует плавную прокрутку страниц и элементов, управляемую через конфигурационный объект. Конфигурационный объект предоставляет возможность тонкой настройки поведения скролла, его скорости, направления и реакции на различные события. Рассмотрим ключевые свойства и их назначение.

Основные свойства конфигурационного объекта

  1. speed Определяет длительность анимации прокрутки в миллисекундах.

    const options = {
    speed: 500
};
    • Значение по умолчанию: 500.
    • Рекомендуется выбирать значения в диапазоне 200–1500 для естественного ощущения движения.

  2. speedAsDuration Позволяет использовать значение speed как фиксированное время анимации вне зависимости от расстояния до цели.

    const options = {
    speed: 800,
    speedAsDuration: true
};
    • true — скорость игнорирует расстояние, движение всегда длится указанное время.
    • false — длительность зависит от расстояния между текущей позицией и целевым элементом.

  3. offset Задает смещение от начала целевого элемента, полезно при фиксированных шапках.

    const options = {
    offset: 100
};
    • Может быть числом (пиксели) или функцией, возвращающей динамическое значение.

  4. easing Определяет функцию ускорения и замедления анимации. Поддерживаются стандартные предустановленные функции:

    • linear
    • easeInQuad
    • easeOutCubic
    • easeInOutQuart
    const options = {
    easing: 'easeInOutCubic'
};

Поведение при взаимодействии с пользователем

  1. updateURL Управляет изменением адресной строки при прокрутке к якорю.

    const options = {
    updateURL: false
};
    • true — URL обновляется с добавлением хеша якоря.
    • false — адресная строка остается неизменной.

  2. popstate Позволяет контролировать действия при навигации через кнопки «Назад» и «Вперед» браузера.

    const options = {
    popstate: true
};

  3. ignore Фильтр элементов, на которые не распространяется плавная прокрутка.

    const options = {
    ignore: '[data-no-scroll]'
};
    • Может быть селектором CSS или функцией, возвращающей true/false для элемента.

Callbacks и события

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

  1. before Вызывается перед началом анимации.

    const options = {
    before: function(anchor, toggle) {
        console.log('Начало прокрутки к', anchor);
    }
};

  2. after Выполняется после завершения прокрутки.

    const options = {
    after: function(anchor, toggle) {
        console.log('Прокрутка завершена');
    }
};

  3. afterToggle Используется при переключении состояния, например, при активации элемента навигации.

Дополнительные параметры

  1. customEasing Позволяет задать собственную функцию расчета прогрессии анимации.

    const options = {
    customEasing: function(time) {
        return time < 0.5
            ? 4 * time * time * time
            : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1;
    }
};
    • Функция получает значение time от 0 до 1 и возвращает нормализованное значение прогресса.

  2. clip Управляет тем, будет ли целевой элемент полностью виден после прокрутки.

    const options = {
    clip: true
};
    • true — элемент полностью помещается в видимую область.
    • false — прокрутка может частично скрывать элемент.

  3. forceHeight Определяет, нужно ли автоматически расширять body для прокрутки до конца страницы.

    const options = {
    forceHeight: true
};

Пример полного конфигурационного объекта

const scroll = new SmoothScroll('a[href*="#"]', {
    speed: 700,
    speedAsDuration: false,
    offset: 80,
    easing: 'easeInOutQuart',
    updateURL: true,
    popstate: true,
    ignore: '.no-scroll',
    clip: true,
    forceHeight: true,
    before: function(anchor, toggle) {
        console.log('Прокрутка начинается');
    },
    after: function(anchor, toggle) {
        console.log('Прокрутка завершена');
    }
});

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

Оглавление