Проверка корректности установки

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

Подключение библиотеки

Для корректной работы Locomotive Scroll необходимо подключить как JavaScript, так и CSS файлы библиотеки. Проверка начинается с убедительности, что файлы доступны браузеру:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.css" />
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.js"></script>

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

  • CSS-файл должен быть подключен до любых кастомных стилей, влияющих на контейнер скролла.
  • JS-файл подключается после элементов, к которым применяется скролл, либо в defer, чтобы избежать ошибок инициализации.
  • Использование CDN упрощает проверку: достаточно открыть консоль браузера и убедиться, что 404 ошибки отсутствуют.

Инициализация Locomotive Scroll

Инициализация библиотеки происходит через создание экземпляра класса LocomotiveScroll и указание контейнера, на котором будет работать скролл.

Пример базовой инициализации:

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  multiplier: 1.0,
  class: 'is-reveal'
});

Обязательные элементы проверки:

  1. Селектор контейнера (el) – должен точно соответствовать элементу на странице, иначе библиотека не сможет применить скролл.
  2. Параметр smooth – включает плавный скролл. При значении true движение страницы будет обрабатываться JS, а не стандартным браузером.
  3. Класс is-reveal – добавляется к элементам с data-scroll при их появлении в зоне видимости. Проверка этого класса помогает убедиться, что события скролла работают корректно.

Проверка работы скролла

После инициализации следует убедиться, что:

  • Страница прокручивается плавно. Для проверки можно прокрутить страницу и наблюдать движение контента.
  • Элементы с атрибутами data-scroll, data-scroll-speed, data-scroll-delay корректно реагируют на прокрутку.
  • В консоли браузера отсутствуют ошибки, связанные с LocomotiveScroll.

Для дополнительной диагностики можно использовать метод scroll.update():

scroll.update();

Он вручную пересчитывает позиции элементов и помогает выявить ошибки в размерах контейнеров или вложенных блоков.

Проверка событий и триггеров

Locomotive Scroll позволяет подписываться на события скролла. Проверка корректности установки включает тестирование этих событий:

scroll.on('scroll', (args) => {
  console.log('Текущая позиция скролла:', args.scroll.y);
});

scroll.on('call', (func, dir, obj) => {
  console.log('Вызван триггер:', func, dir, obj);
});

Важно убедиться:

  • Событие scroll срабатывает при движении страницы.
  • События call корректно вызываются для элементов с data-scroll-call.
  • Параметры, передаваемые в колбэк, отражают правильные значения координат и направления.

Совместимость с другими библиотеками

При интеграции Locomotive Scroll в существующий проект важно проверить совместимость с:

  • CSS-анимациями (transform, position: fixed) – иногда библиотека требует адаптации фиксированных элементов.
  • Другими скриптами прокрутки – конфликты с нативным или кастомным JS скроллом могут вызвать дрожание страницы.
  • Адаптивными макетами – при изменении размеров окна нужно вызвать scroll.update() для пересчета позиций элементов.
window.addEventListener('resize', () => scroll.update());

Визуальная диагностика

Эффективным способом проверки является добавление временных стилей для элементов с data-scroll:

[data-scroll] {
  outline: 1px solid red;
}

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

Вывод о корректности установки

После выполнения всех перечисленных шагов корректность установки подтверждается, если:

  • Скролл работает плавно без рывков.
  • Элементы с атрибутами data-scroll реагируют на движение.
  • События scroll и call срабатывают в соответствии с ожиданиями.
  • Нет ошибок в консоли, а все подключенные файлы доступны.

Такой пошаговый контроль гарантирует, что Locomotive Scroll интегрирована корректно и готова к использованию в проекте.

Оглавление