Функция handler в деталях

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

Синтаксис и структура

Функция handler задаётся при создании нового waypoint:

var waypoint = new Waypoint({
  element: document.getElementById('my-element'),
  handler: function(direction) {
    console.log('Waypoint сработал! Направление:', direction);
  },
  offset: '50%'
});

Ключевые параметры, связанные с handler:

  • direction – строка, принимающая значения 'down' или 'up'. Она указывает направление движения скролла, при котором сработал waypoint:

    • 'down' – пользователь скроллит страницу вниз, элемент пересёк линию offset сверху вниз.
    • 'up' – пользователь скроллит страницу вверх, элемент пересёк линию offset снизу вверх.

  • this.element – ссылка на DOM-элемент, с которым связан waypoint.

  • this.triggerPoint – координата в пикселях относительно верхней границы документа, где waypoint был активирован.

Передача контекста

Внутри handler объект this ссылается на сам waypoint. Это позволяет:

  • Динамически изменять offset после создания waypoint:
var waypoint = new Waypoint({
  element: document.getElementById('section'),
  handler: function(direction) {
    if (direction === 'down') {
      this.offset = '75%';
    } else {
      this.offset = '25%';
    }
  }
});

  • Вызывать методы waypoint напрямую:

    • this.destroy() – полностью удаляет waypoint.
    • this.disable() – временно отключает срабатывание.
    • this.enable() – повторно включает waypoint.

Обработка нескольких направлений

Функция handler должна учитывать направление скролла для реализации различных эффектов. Например:

var waypoint = new Waypoint({
  element: document.getElementById('fade-element'),
  handler: function(direction) {
    if (direction === 'down') {
      this.element.classList.add('visible');
    } else {
      this.element.classList.remove('visible');
    }
  },
  offset: '50%'
});

В этом примере элемент плавно появляется при скролле вниз и исчезает при скролле вверх. Такой подход особенно полезен для анимаций и lazy-loading контента.

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

Если проект использует jQuery, handler также может работать с jQuery-объектами:

$('#animated-section').waypoint({
  handler: function(direction) {
    $(this.element).fadeIn();
  },
  offset: '75%'
});

Важно помнить, что this.element остаётся нативным DOM-элементом, поэтому при необходимости применяются методы обёртки jQuery.

Параметр context и влияние на handler

Waypoints позволяет задать контекст прокрутки через параметр context. Контекст влияет на определение момента срабатывания:

var scrollContainer = document.getElementById('scroll-box');

var waypoint = new Waypoint({
  element: document.getElementById('target'),
  handler: function(direction) {
    console.log('Waypoint в контейнере:', direction);
  },
  context: scrollContainer,
  offset: '20%'
});

В этом случае handler вызывается относительно верхней границы scroll-box, а не всего окна браузера. Это критично для реалистичного контроля прокрутки внутри блоков с фиксированными размерами.

Динамическая модификация handler

Handler может быть изменён после создания waypoint, что даёт гибкость для сложных сценариев:

var waypoint = new Waypoint({
  element: document.getElementById('dynamic-element'),
  handler: function(direction) {
    console.log('Первоначальный handler');
  }
});

// Позже меняем handler
waypoint.handler = function(direction) {
  console.log('Новый handler при направлении:', direction);
};

Такой подход позволяет адаптировать логику waypoint без необходимости пересоздавать объект, что полезно для SPA или страниц с динамическим контентом.

Работа с множественными waypoint

На одном элементе может быть несколько waypoint с разными handler:

var waypoint1 = new Waypoint({
  element: document.getElementById('multi'),
  handler: function(direction) { console.log('Waypoint 1', direction); },
  offset: '0%'
});

var waypoint2 = new Waypoint({
  element: document.getElementById('multi'),
  handler: function(direction) { console.log('Waypoint 2', direction); },
  offset: '50%'
});

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

Практические рекомендации

  • Всегда учитывать направление скролла через параметр direction, чтобы избежать неожиданных эффектов.
  • Для оптимизации производительности избегать тяжёлых вычислений внутри handler, особенно на мобильных устройствах.
  • Использовать методы destroy, disable и enable для контроля жизненного цикла waypoint.
  • Для элементов, добавляемых динамически, создавать waypoint после вставки в DOM, иначе handler не будет работать.

Функция handler — это ядро взаимодействия Waypoints с пользователем. Правильное использование параметров direction, this.element и this.triggerPoint позволяет реализовать широкий спектр анимаций, ленивой загрузки контента и интерактивных эффектов на скролле.

Оглавление