scrollFromAnywhere

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

Синтаксис и параметры

Метод вызывается через экземпляр объекта Locomotive Scroll:

scroll.scrollFromAnywhere(target, options);

  • target – может быть:

    • строкой CSS-селектора ('#section2', '.item'),
    • числом пикселей (например, 500),
    • объектом DOM (document.querySelector('#section2')).

  • options – объект с параметрами управления прокруткой:

    • offset (number) – смещение относительно верхней границы контейнера. Позволяет учитывать фиксированные шапки или дополнительные отступы.
    • duration (number) – время анимации в миллисекундах.
    • easing (string) – тип кривой анимации ('linear', 'easeInOutQuad' и т.д.).
    • disableLerp (boolean) – отключает интерполяцию скорости скролла для мгновенного перемещения.

Пример:

scroll.scrollFromAnywhere('#section3', {
  offset: -50,
  duration: 1200,
  easing: 'easeInOutCubic'
});

В этом примере прокрутка выполнится к элементу с идентификатором section3, с учётом отрицательного смещения 50px, плавно за 1,2 секунды.

Работа с пиксельными координатами

Метод поддерживает абсолютные координаты по вертикали и горизонтали:

scroll.scrollFromAnywhere(800, {
  duration: 1000,
  easing: 'easeOutQuad'
});
  • Если передан числовой аргумент, скролл переместится на указанное количество пикселей от начала документа.
  • Можно задавать объект с координатами x и y:
scroll.scrollFromAnywhere({ x: 0, y: 400 }, { duration: 800 });

Это особенно полезно при горизонтальном скролле или при нестандартных контейнерах.

Применение с различными контейнерами

Locomotive Scroll позволяет задавать кастомный контейнер для скролла через опцию el. scrollFromAnywhere корректно учитывает любой контейнер:

const customScroll = new LocomotiveScroll({
  el: document.querySelector('#custom-container'),
  smooth: true
});

customScroll.scrollFromAnywhere('#item5', { duration: 1500 });

Метод автоматически рассчитывает позицию элемента относительно заданного контейнера и выполняет плавный переход.

Динамическая прокрутка к элементам

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

document.querySelectorAll('.nav-link').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    const targetID = link.getAttribute('href');
    scroll.scrollFromAnywhere(targetID, { duration: 1000, offset: -100 });
  });
});

В этом примере навигация по якорям работает плавно и учитывает смещение, что важно при фиксированных шапках или адаптивных макетах.

Настройка кривых анимации (easing)

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

scroll.scrollFromAnywhere('#section7', {
  duration: 2000,
  easing: function(t) { return t*t*t; } // кубическая кривая
});
  • Линейная анимация: t => t
  • EaseInQuad: t => t*t
  • EaseOutQuad: t => t*(2-t)
  • EaseInOutCubic: t => t<0.5 ? 4*t*t*t : 1 - Math.pow(-2*t + 2, 3)/2

Кастомные кривые позволяют создавать уникальные эффекты скролла, подстраивая скорость движения под дизайн страницы.

Отключение интерполяции (disableLerp)

По умолчанию Locomotive Scroll применяет интерполяцию (lerp) для плавности движения. Если нужно мгновенное перемещение:

scroll.scrollFromAnywhere('#section9', {
  duration: 0,
  disableLerp: true
});
  • Метод обходит плавное ускорение и перемещает скролл без анимации.
  • Используется для резких переключений между секциями или при навигации по вкладкам.

Обработка горизонтального скролла

Locomotive Scroll поддерживает горизонтальные контейнеры (direction: 'horizontal'). В этом случае scrollFromAnywhere принимает объект с координатами x и y:

scroll.scrollFromAnywhere({ x: 500, y: 0 }, { duration: 1200, easing: 'easeInOutQuad' });
  • x – горизонтальная позиция
  • y – вертикальная (обычно 0 для горизонтального скролла)
  • Позволяет плавно перемещать элементы по оси X, что удобно для галерей или каруселей.

Совмещение с другими методами Locomotive Scroll

scrollFromAnywhere хорошо комбинируется с:

  • on('scroll', callback) – для запуска анимаций при скролле.
  • scrollTo – для синхронизации стандартного метода скролла и вызова из внешних событий.
  • update – для пересчёта размеров после динамических изменений DOM.

Пример динамического вызова:

scroll.on('scroll', ({ scroll }) => {
  if(scroll.y > 1000) {
    scroll.scrollFromAnywhere('#footer', { duration: 1500 });
  }
});
  • Срабатывает при прокрутке вниз.
  • Позволяет создавать интерактивные сценарии скролла.
Оглавление