Динамическое изменение настроек

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

Инициализация с базовыми настройками

Для начала создаём экземпляр Smooth Scroll с набором начальных параметров:

const scroll = new SmoothScroll('a[href*="#"]', {
  speed: 800,
  offset: 100,
  easing: 'easeInOutCubic',
  updateURL: true
});

Пояснение ключевых опций:

  • speed – скорость прокрутки в миллисекундах.
  • offset – смещение от целевого элемента (например, для фиксированного хедера).
  • easing – функция плавности анимации.
  • updateURL – обновлять URL при прокрутке к якорю.

Доступ к текущим настройкам

Экземпляр Smooth Scroll хранит свои настройки в объекте options. Доступ к ним позволяет проверять или модифицировать конфигурацию в любой момент:

console.log(scroll.options);
// { speed: 800, offset: 100, easing: 'easeInOutCubic', updateURL: true, ... }

Этот объект можно изменять напрямую, однако рекомендуется использовать методы, обеспечивающие корректное применение новых параметров.

Изменение отдельных параметров

Для изменения отдельных настроек используется прямое присвоение свойств объекта options. Например, чтобы увеличить скорость прокрутки:

scroll.options.speed = 1200;

А для изменения смещения с учётом динамического хедера:

scroll.options.offset = () => {
  const header = document.querySelector('.fixed-header');
  return header ? header.offsetHeight : 0;
};

Использование функции для offset позволяет адаптировать прокрутку под изменяющийся размер элементов на странице.

Динамическая смена функций плавности

Функцию easing также можно изменить в процессе работы:

scroll.options.easing = 'easeOutQuart';

Smooth Scroll автоматически применит новую функцию к следующим вызовам прокрутки. Поддерживаются встроенные функции: linear, easeInQuad, easeOutQuad, easeInOutCubic и другие. Также возможно использование пользовательской функции:

scroll.options.easing = function (t, b, c, d) {
  return c*(t/=d)*t + b;
};

Где параметры t, b, c, d соответствуют времени анимации, начальному значению, изменению и длительности соответственно.

Управление смещением для разных сценариев

С помощью динамического offset можно реализовать различные сценарии:

  • Прокрутка с учётом скрытого меню, которое появляется только при скролле.
  • Различное смещение для мобильной и десктопной версии.
  • Адаптивная прокрутка при изменении размеров окна.

Пример адаптивного смещения:

scroll.options.offset = () => window.innerWidth < 768 ? 50 : 120;

Теперь значение offset автоматически подстраивается под ширину окна.

Временное отключение и повторная активация Smooth Scroll

Для динамических изменений иногда нужно временно отключать скролл:

scroll.destroy(); // Отключение всех обработчиков

После изменения настроек можно снова инициализировать библиотеку:

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

Это позволяет полностью перепривязать элементы с новыми параметрами, сохраняя все старые ссылки и логику.

Обновление ссылок и добавление новых элементов

Если на странице появляются новые якорные ссылки после загрузки, их можно привязать к уже существующему экземпляру:

scroll.refresh(); // Пересчитывает все целевые элементы и обработчики

Метод refresh() гарантирует корректную работу динамически добавленных элементов без создания нового экземпляра библиотеки.

Примеры практических сценариев

  1. Смена скорости при удержании кнопки:
document.querySelector('.fast-scroll').addEventListener('mousedown', () => {
  scroll.options.speed = 400;
});
document.querySelector('.fast-scroll').addEventListener('mouseup', () => {
  scroll.options.speed = 800;
});
  1. Адаптивное смещение при открытом меню:
function getOffset() {
  const menu = document.querySelector('.sidebar');
  return menu.classList.contains('open') ? menu.offsetHeight + 20 : 20;
}

scroll.options.offset = getOffset;
  1. Изменение плавности при переходе между разделами:
document.querySelectorAll('.section-link').forEach(link => {
  link.addEventListener('click', () => {
    scroll.options.easing = 'easeInOutQuart';
  });
});

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

Оглавление