Симуляция прокрутки

Библиотека Waypoints предоставляет удобный способ реагирования на события прокрутки страницы. В основе лежит идея: можно «прикрепить» обработчик к элементу, который срабатывает, когда элемент достигает определённой позиции относительно окна браузера.

Создание waypoint осуществляется через конструктор:

var waypoint = new Waypoint({
  element: document.getElementById('my-element'),
  handler: function(direction) {
    console.log('Элемент достиг точки:', direction);
  },
  offset: '50%' // смещение относительно верха окна
});
  • element — DOM-элемент, за которым ведётся наблюдение.
  • handler — функция обратного вызова, вызываемая при пересечении точки. Параметр direction указывает направление прокрутки: 'down' или 'up'.
  • offset — смещение точки срабатывания от верха окна. Может быть числом в пикселях (100) или процентом ('50%').

Смещение и его роль

Смещение (offset) позволяет гибко управлять моментом срабатывания waypoint. Если указать '0%', событие произойдёт, когда верх элемента совпадёт с верхом окна. '100%' — срабатывание при достижении нижней границы окна.

Примеры:

// Событие при достижении 100px от верха окна
new Waypoint({
  element: document.getElementById('header'),
  handler: function(dir) { console.log(dir); },
  offset: 100
});

// Событие при прохождении середины окна
new Waypoint({
  element: document.getElementById('section'),
  handler: function(dir) { console.log(dir); },
  offset: '50%'
});

Горизонтальная и вертикальная прокрутка

Waypoints поддерживает вертикальные (Waypoints) и горизонтальные (Horizontal Waypoints) отслеживания:

var horizontalWaypoint = new Waypoint({
  element: document.getElementById('scroll-item'),
  handler: function(direction) {
    console.log('Горизонтальная прокрутка:', direction);
  },
  horizontal: true,
  offset: '75%'
});
  • Для горизонтальной прокрутки используется свойство horizontal: true.
  • Смещение интерпретируется относительно левой границы окна.

Контейнеры прокрутки

По умолчанию Waypoints отслеживает прокрутку окна браузера. Можно задать любой контейнер прокрутки с помощью свойства context:

var waypoint = new Waypoint({
  element: document.getElementById('item'),
  handler: function(dir) { console.log(dir); },
  context: document.getElementById('scrollable-div')
});
  • context — DOM-элемент с прокруткой, внутри которого ведётся отслеживание.
  • Очень полезно для кастомных скроллблоков или каруселей.

Sticky элементы с Waypoints

Waypoints часто используют для реализации «прилипших» элементов (sticky). Для этого применяется sticky shortcut:

var sticky = new Waypoint.Sticky({
  element: document.getElementById('navbar')
});
  • Элемент фиксируется при достижении верхней границы окна.
  • Можно комбинировать с кастомными классами через CSS для анимации и переходов.

Управление событиями

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

// Отключение waypoint
waypoint.disable();

// Включение обратно
waypoint.enable();

// Удаление waypoint полностью
waypoint.destroy();
  • disable — временно деактивирует обработчик.
  • destroy — полностью удаляет объект, освобождая память и предотвращая дальнейшие срабатывания.

Группы и последовательные срабатывания

Для сложных интерфейсов удобно объединять несколько waypoint в группы. Группы позволяют контролировать порядок срабатываний и избегать конфликтов:

Waypoint.Group.add(waypoint);
Waypoint.Group.flush();
  • Group.flush() — принудительно проверяет все waypoint группы на соответствие текущей позиции прокрутки.
  • Полезно при динамическом изменении размеров элементов или окна.

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

var elements = document.querySelectorAll('.animate-on-scroll');

elements.forEach(function(el) {
  new Waypoint({
    element: el,
    handler: function(direction) {
      el.classList.add('fade-in');
    },
    offset: '80%'
  });
});
  • Элементы появляются с эффектом fade-in, когда доходят до 80% высоты окна.
  • direction можно использовать для различной анимации при скролле вверх и вниз.

Производительность

При множестве waypoint важно учитывать производительность:

  • Использовать context для локальных контейнеров, чтобы не перегружать обработку всего окна.
  • Удалять waypoint для элементов, которые больше не нужны на странице (destroy).
  • Группировать waypoint для одновременной проверки, что уменьшает количество срабатываний.

Итоговые возможности Waypoints

  • Отслеживание вертикальной и горизонтальной прокрутки
  • Гибкая настройка точки срабатывания через offset
  • Поддержка кастомных контейнеров прокрутки
  • Sticky-элементы и анимации при скролле
  • Группы waypoint и контроль производительности

Waypoints позволяет создавать динамичные и отзывчивые интерфейсы, реагирующие на прокрутку без сложных ручных расчётов позиции элементов и событий scroll.

Оглавление