Модификация поведения

Ключевое преимущество библиотеки Smooth Scroll заключается в гибком управлении поведением прокрутки. Базовые параметры позволяют изменять восприятие скорости и плавности движения страницы.

Основные параметры:

  • speed — определяет длительность прокрутки в миллисекундах
  • speedAsDuration — интерпретирует значение speed как фиксированную длительность, а не как зависимость от расстояния
  • durationMax / durationMin — ограничивают максимальную и минимальную длительность анимации

Пример настройки:

const scroll = new SmoothScroll('a[href*="#"]', {
    speed: 800,
    speedAsDuration: true
});

В данном случае прокрутка всегда занимает ровно 800 мс независимо от расстояния до целевого элемента.

Управление функцией easing

Плавность движения определяется функцией easing — математической кривой, задающей ускорение и замедление анимации.

Поддерживаются встроенные варианты:

  • easeInQuad
  • easeOutQuad
  • easeInOutCubic
  • easeInOutQuart
  • easeInOutQuint

Пример:

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

Пользовательская функция easing

Допускается передача собственной функции:

const scroll = new SmoothScroll('a[href*="#"]', {
    easing: function (time) {
        return time < 0.5
            ? 2 * time * time
            : 1 - Math.pow(-2 * time + 2, 2) / 2;
    }
});

Аргумент time принимает значение от 0 до 1 и описывает прогресс анимации.

Смещение позиции прокрутки (offset)

Частая задача — учитывать фиксированные элементы интерфейса (например, шапку сайта). Для этого используется параметр offset.

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

Динамический offset

Возможна функция:

const scroll = new SmoothScroll('a[href*="#"]', {
    offset: function (anchor, toggle) {
        return document.querySelector('.header').offsetHeight;
    }
});

Позволяет вычислять смещение в зависимости от состояния DOM.

Управление контейнером прокрутки

По умолчанию прокрутка применяется ко всему документу. При необходимости можно ограничить область:

const scroll = new SmoothScroll('a[href*="#"]', {
    header: '.fixed-header'
});

Параметр header автоматически учитывает высоту указанного элемента.

Контроль поведения при клике

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

  • ignore — селекторы элементов, которые не должны инициировать прокрутку
  • updateURL — обновлять ли URL в адресной строке
  • popstate — реагировать на навигацию браузера (назад/вперёд)

Пример:

const scroll = new SmoothScroll('a[href*="#"]', {
    ignore: '[data-scroll-ignore]',
    updateURL: false
});

Кастомные события

Библиотека генерирует события, позволяющие вмешиваться в процесс прокрутки.

Основные события:

  • scrollStart
  • scrollStop
  • scrollCancel

Пример подписки:

document.addEventListener('scrollStart', function (event) {
    console.log('Начало прокрутки', event.detail);
}, false);

Структура event.detail:

{
    anchor: элемент назначения,
    toggle: элемент, вызвавший прокрутку
}

Управление прокруткой программно

Помимо кликов, прокрутку можно запускать вручную.

const scroll = new SmoothScroll();

scroll.animateScroll(
    document.querySelector('#section'),
    null,
    { speed: 600 }
);

Параметры:

  1. Целевой элемент
  2. Триггер (можно null)
  3. Переопределение настроек

Прерывание анимации

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

  • прокрутка колесом мыши
  • касание экрана
  • нажатие клавиш

Настройка:

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

Отключение:

cancelOnUserAction: false

Ограничение области действия

Можно задать условия, при которых библиотека активна:

const scroll = new SmoothScroll('a[href*="#"]', {
    mediaQuery: '(min-width: 768px)'
});

Прокрутка будет работать только при выполнении медиазапроса.

Кастомизация поведения фокуса

После прокрутки браузер может устанавливать фокус на целевой элемент. Управление этим поведением:

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

Дополнительно можно вручную управлять фокусом:

document.addEventListener('scrollStop', function (event) {
    event.detail.anchor.focus();
});

Работа с динамическим контентом

При изменении DOM (например, AJAX-загрузка) необходимо обновить привязки:

scroll.destroy();
scroll.init();

Или полностью пересоздать экземпляр.

Расширенные сценарии

Разная скорость для разных элементов

document.querySelectorAll('a[href*="#"]').forEach(link => {
    link.addEventListener('click', function (e) {
        e.preventDefault();

        scroll.animateScroll(
            document.querySelector(this.hash),
            this,
            {
                speed: this.dataset.speed || 500
            }
        );
    });
});

Параллакс-эффекты

Комбинация с обработчиком событий:

document.addEventListener('scroll', function () {
    const scrolled = window.pageYOffset;
    document.querySelector('.parallax').style.transform =
        `translateY(${scrolled * 0.5}px)`;
});

Интеграция с другими библиотеками

Smooth Scroll часто используется вместе с:

  • анимациями (GSAP)
  • наблюдателями (Intersection Observer)
  • SPA-фреймворками

Пример синхронизации с Intersection Observer:

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            console.log('Элемент в зоне видимости');
        }
    });
});

document.querySelectorAll('section').forEach(section => {
    observer.observe(section);
});

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

Факторы, влияющие на производительность:

  • количество одновременно обрабатываемых элементов
  • сложность easing-функции
  • частота перерасчёта layout

Рекомендации:

  • использовать простые easing-функции
  • избегать лишних перерисовок
  • минимизировать обращения к DOM внутри обработчиков

Глубокая кастомизация через исходный код

Библиотека допускает изменение внутренней логики:

  • модификация расчёта расстояния
  • изменение алгоритма интерполяции
  • внедрение собственных хуков

Пример изменения функции расчёта позиции требует редактирования исходного файла:

var getEndLocation = function (anchor, headerHeight, offset) {
    return anchor.offsetTop - headerHeight - offset;
};

Такая модификация позволяет полностью контролировать конечную точку прокрутки.

Управление поведением при истории браузера

При переходах назад/вперёд можно синхронизировать прокрутку:

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

Браузер будет восстанавливать позицию с учётом плавной анимации.

Кастомные условия активации

Иногда требуется активировать прокрутку только при определённых условиях:

if (window.innerWidth > 1024) {
    new SmoothScroll('a[href*="#"]');
}

Или более гибко:

const isTouch = 'ontouchstart' in window;

const scroll = new SmoothScroll('a[href*="#"]', {
    speed: isTouch ? 300 : 800
});

Управление несколькими экземплярами

В сложных интерфейсах можно использовать несколько независимых экземпляров:

const mainScroll = new SmoothScroll('.main-nav a[href*="#"]');
const modalScroll = new SmoothScroll('.modal a[href*="#"]');

Это позволяет разделить поведение прокрутки в разных частях интерфейса.

Отладка и диагностика

Для анализа поведения удобно включать события:

document.addEventListener('scrollStart', console.log);
document.addEventListener('scrollStop', console.log);

Также полезно:

  • проверять корректность селекторов
  • отслеживать конфликтующие обработчики
  • анализировать производительность через DevTools

Переопределение глобальных настроек

Можно задать базовую конфигурацию и переопределять её локально:

const defaultOptions = {
    speed: 500,
    easing: 'easeInOutCubic'
};

const scroll = new SmoothScroll('a[href*="#"]', defaultOptions);

Локальное переопределение:

scroll.animateScroll(target, trigger, {
    speed: 1000
});

Управление поведением скролла при загрузке страницы

Иногда требуется плавная прокрутка при переходе по URL с якорем:

window.addEventListener('load', function () {
    if (window.location.hash) {
        scroll.animateScroll(document.querySelector(window.location.hash));
    }
});

Это устраняет резкий скачок страницы при загрузке.

Комбинирование параметров

Максимальная гибкость достигается при совместном использовании настроек:

const scroll = new SmoothScroll('a[href*="#"]', {
    speed: 700,
    speedAsDuration: true,
    offset: 100,
    easing: 'easeInOutQuart',
    updateURL: false,
    popstate: true
});

Такой подход позволяет точно контролировать поведение прокрутки под конкретные задачи интерфейса.

Оглавление