Множественные экземпляры на странице

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

Создание отдельных экземпляров

Каждый экземпляр Smooth Scroll можно создать для конкретного набора ссылок. Например:

import SmoothScroll from 'smooth-scroll';

// Основная навигация
const mainScroll = new SmoothScroll('.main-nav a', {
    speed: 600,
    offset: 50,
});

// Боковое меню
const sidebarScroll = new SmoothScroll('.sidebar-nav a', {
    speed: 400,
    offset: 20,
});

Ключевые моменты:

  • Каждому экземпляру можно задать свои настройки (speed, offset, easing и т.д.).
  • Экземпляры не мешают друг другу, так как работают с разными селекторами ссылок.
  • Можно использовать любое количество экземпляров на одной странице, главное — правильно разделять селекторы.

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

Smooth Scroll возвращает объект экземпляра, который содержит методы для управления прокруткой:

  • scroll.animateScroll(target, anchor, options) — инициирует прокрутку к элементу.
  • destroy() — удаляет обработчики событий и очищает экземпляр.
  • cancelScroll() — останавливает текущую анимацию.

Пример использования нескольких экземпляров с программным вызовом прокрутки:

// Прокрутка к конкретному элементу в основной навигации
mainScroll.animateScroll(document.querySelector('#section1'));

// Прокрутка через боковое меню
sidebarScroll.animateScroll(document.querySelector('#widget2'));

Конфликты между экземплярами

Основные причины конфликтов:

  1. Перекрывающиеся селекторы. Если один и тот же элемент обрабатывается двумя экземплярами, возможны непредсказуемые анимации.
  2. Общие глобальные стили прокрутки. Например, если один экземпляр меняет scroll-behavior у html/body.
  3. Асинхронные события. Одновременный вызов нескольких экземпляров может вызвать “рывки” прокрутки.

Рекомендации для предотвращения конфликтов:

  • Использовать уникальные селекторы для каждой группы ссылок.
  • Создавать экземпляры только тогда, когда они реально нужны.
  • Для программного вызова проверять, что текущая прокрутка завершена (scroll.isAnimating).

Настройка разных параметров для отдельных блоков

Разные блоки на странице могут требовать различной скорости, смещения или кривой анимации:

const heroScroll = new SmoothScroll('.hero-links a', {
    speed: 800,
    easing: 'easeInOutCubic',
    offset: 100,
});

const footerScroll = new SmoothScroll('.footer-links a', {
    speed: 400,
    easing: 'linear',
    offset: 10,
});
  • speed отвечает за длительность прокрутки.
  • easing — функция плавности (например, easeInOutCubic, linear, easeOutQuad).
  • offset позволяет учитывать фиксированные элементы (шапку, плавающие панели).

Динамическое создание экземпляров

Если элементы навигации появляются динамически (через AJAX или SPA):

function initDynamicScroll(selector) {
    return new SmoothScroll(selector, {
        speed: 600,
        offset: 50,
    });
}

// После загрузки новых блоков
const dynamicScroll = initDynamicScroll('.dynamic-nav a');
  • Экземпляр создается только для новых элементов, что предотвращает повторное привязывание обработчиков к старым ссылкам.
  • Можно хранить все экземпляры в массиве для дальнейшего управления или уничтожения.

Поддержка кастомных событий

Каждый экземпляр можно настраивать через колбэки:

  • before: вызывается перед началом прокрутки.
  • after: вызывается после завершения анимации.

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

const firstScroll = new SmoothScroll('.first a', {
    speed: 500,
    before: function (anchor, toggle) {
        console.log('Начало прокрутки первого блока');
    },
});

const secondScroll = new SmoothScroll('.second a', {
    speed: 700,
    after: function (anchor, toggle) {
        console.log('Завершение прокрутки второго блока');
    },
});
  • Колбэки работают только для конкретного экземпляра.
  • Можно использовать их для синхронизации с другими элементами интерфейса.

Выводы по организации множественных экземпляров

  • Изолированность: каждый экземпляр работает с конкретной группой ссылок.
  • Настройки: экземпляры могут иметь разные параметры, подходящие под контекст блока.
  • Контроль: методы animateScroll, destroy и cancelScroll позволяют управлять любым экземпляром отдельно.
  • Безопасность: уникальные селекторы и проверка текущей анимации предотвращают конфликты и «дребезг» прокрутки.

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

Оглавление