Использование в Vue.js

Для работы с Waypoints в Vue.js необходимо сначала установить библиотеку. В современных проектах на основе npm это делается командой:

npm install waypoints

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

import Waypoint from 'waypoints/lib/noframework.waypoints';

Использование версии noframework предпочтительно для Vue.js, так как она не зависит от jQuery и легко интегрируется с реактивной системой Vue.

Создание Waypoint в компоненте

Waypoints создаются для отслеживания положения элемента на странице относительно видимой области окна браузера. В Vue.js инициализация обычно выполняется в хуке mounted, чтобы гарантировать, что элемент уже присутствует в DOM.

Пример инициализации:

export default {
  mounted() {
    new Waypoint({
      element: this.$refs.section,
      handler: (direction) => {
        console.log(`Элемент прокручен ${direction}`);
      },
      offset: '50%'
    });
  }
}

Пояснения:

  • element — ссылка на DOM-элемент. В Vue.js удобно использовать ref.
  • handler — функция, которая вызывается при пересечении точки с элементом.
  • offset — смещение относительно верхней границы окна (может быть в процентах, пикселях или функцией).

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

В шаблоне компонента элемент, за которым нужно следить:

<div ref="section" class="section">
  Контент блока
</div>

В JavaScript-коде через this.$refs.section можно получить доступ к элементу, что позволяет корректно передать его в Waypoint.

Направление события и offset

Параметр direction в обработчике может принимать значения:

  • 'down' — элемент пересечён при прокрутке вниз.
  • 'up' — элемент пересечён при прокрутке вверх.

Offset позволяет сдвигать момент срабатывания Waypoint. Примеры использования:

offset: '75%' // событие сработает, когда верх элемента будет на 75% высоты окна
offset: 200    // событие сработает, когда верх элемента будет на 200 пикселей от верха окна

Также можно использовать функцию:

offset: () => window.innerHeight / 2

Управление несколькими Waypoints

В компонентах с большим количеством блоков часто требуется создавать несколько Waypoints. Это делается через массив и итерацию:

export default {
  mounted() {
    this.sections = this.$refs.sections; // массив элементов через ref
    this.sections.forEach((el) => {
      new Waypoint({
        element: el,
        handler: (dir) => console.log(`Элемент ${el.dataset.id} прокручен ${dir}`),
        offset: '50%'
      });
    });
  }
}

Шаблон с несколькими элементами:

<div v-for="block in blocks" :key="block.id" :ref="el => sections.push(el)" :data-id="block.id">
  {{ block.content }}
</div>

Важно: В Vue 3 для массивного ref необходимо использовать функцию колбэк el => refs.push(el) вместо простого ref="sections", чтобы корректно собрать все DOM-элементы.

Динамическое создание и удаление Waypoints

В проектах с динамическим контентом важно управлять жизненным циклом Waypoints. Для удаления используется метод .destroy():

let waypoint = new Waypoint({
  element: this.$refs.section,
  handler: () => {},
});

waypoint.destroy(); // удаление waypoint при необходимости

При динамическом обновлении DOM старые Waypoints следует удалять, чтобы избежать утечек памяти и двойного срабатывания.

Использование с Vue Router

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

watch: {
  '$route'(to, from) {
    // при смене маршрута можно заново инициализировать Waypoints
    this.initWaypoints();
  }
}

Реактивные эффекты и Waypoints

Waypoints работает с DOM напрямую, поэтому для интеграции с реактивными данными Vue полезно использовать методы компонента и реактивные свойства для управления состоянием:

export default {
  data() {
    return {
      activeSection: null
    }
  },
  mounted() {
    new Waypoint({
      element: this.$refs.section,
      handler: (dir) => {
        this.activeSection = dir === 'down' ? 'section-1' : null;
      },
      offset: '50%'
    });
  }
}

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

Анимации при скролле

Waypoints часто используют для запуска CSS-анимаций при появлении элемента в области видимости:

new Waypoint({
  element: this.$refs.section,
  handler: () => {
    this.$refs.section.classList.add('animate-fade-in');
  },
  offset: '80%'
});

Использование комбинации Waypoints и Vue позволяет управлять состоянием анимаций и реактивно обновлять интерфейс.

Сводка ключевых особенностей интеграции Waypoints с Vue

  • Использование mounted для инициализации.
  • Привязка элементов через ref.
  • Управление смещением события через offset.
  • Отслеживание направления прокрутки через direction.
  • Управление несколькими Waypoints через массив элементов.
  • Удаление старых Waypoints при динамическом контенте через .destroy().
  • Интеграция с реактивной системой Vue для изменения состояния компонентов.
  • Запуск анимаций и динамического контента на основе скролла.
Оглавление