Метод context

Метод context является ключевым инструментом для работы с экземплярами Waypoint, позволяя управлять и настраивать область, в пределах которой отслеживаются скролл-события. Каждый Waypoint привязан к определённому контексту, который по умолчанию является объектом window. Контекст определяет, когда триггер срабатывает, исходя из положения элемента относительно этого контекста.

Основной синтаксис

var waypoint = new Waypoint({
  element: document.getElementById('myElement'),
  handler: function(direction) {
    console.log('Waypoint сработал при скролле ' + direction);
  },
  context: document.getElementById('scrollContainer')
});

В этом примере context задаётся явно. Это значит, что Waypoint будет отслеживать положение элемента относительно элемента scrollContainer, а не окна браузера.

Получение контекста через метод context

Каждый экземпляр Waypoint имеет метод context(), который позволяет получить объект контекста, связанный с конкретным waypoint. Это может быть полезно, если необходимо узнать или использовать текущий контекст в дальнейшем коде.

var wpContext = waypoint.context();
console.log(wpContext.element); // HTML-элемент, который является контейнером для скролла

Метод возвращает объект Context, а не просто DOM-элемент. Объект Context содержит свойства и методы, позволяющие управлять поведением всех waypoint, связанных с этим контекстом:

  • element — DOM-элемент, являющийся контейнером скролла.
  • waypoints — коллекция всех waypoint, привязанных к данному контексту.
  • refresh() — метод для обновления всех waypoint внутри контекста, особенно полезен после изменения DOM.
  • destroy() — удаляет все waypoint, связанные с контекстом.

Взаимодействие с методами контекста

Метод refresh()

Контекст автоматически отслеживает размеры и положение элементов при скролле, но если изменяется контент страницы или размеры контейнера, необходимо вызвать refresh():

wpContext.refresh();

Это гарантирует, что все waypoint пересчитают свои позиции относительно обновлённого контекста.

Метод destroy()

Для удаления всех waypoint, связанных с конкретным контекстом:

wpContext.destroy();

После вызова destroy() waypoint перестают реагировать на скролл внутри этого контекста. Это особенно полезно при динамическом создании и удалении контейнеров с прокруткой.

Создание кастомного контекста

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

var customContext = new Waypoint.Context(document.getElementById('customContainer'));

Теперь можно создавать waypoint с привязкой к customContext:

var waypoint = new Waypoint({
  element: document.getElementById('targetElement'),
  handler: function(direction) {
    console.log(direction);
  },
  context: customContext
});

Созданный таким образом контекст полностью управляет всеми waypoint внутри него, включая методы refresh() и destroy().

Особенности работы с контекстами

  1. Иерархия и вложенность: Контексты можно использовать для разных областей прокрутки на странице. Каждый контекст управляет только теми waypoint, которые ему принадлежат.
  2. Поддержка динамических изменений DOM: Контекст позволяет обновлять waypoint после изменения высоты элементов или появления новых блоков через refresh().
  3. События прокрутки: Контекст отслеживает скролл только внутри своего контейнера, а не по всему документу, что улучшает производительность на страницах с несколькими скроллируемыми секциями.

Пример комплексного использования

// Создание кастомного контекста для контейнера
var scrollBox = document.getElementById('scrollBox');
var customContext = new Waypoint.Context(scrollBox);

// Создание waypoint внутри кастомного контекста
var wp1 = new Waypoint({
  element: document.getElementById('section1'),
  handler: function(direction) {
    console.log('Section1', direction);
  },
  context: customContext
});

// Обновление всех waypoint при изменении содержимого контейнера
scrollBox.addEventListener('resize', function() {
  customContext.refresh();
});

В этом примере waypoint реагирует на прокрутку внутри scrollBox, и при изменении его размеров все позиции пересчитываются автоматически.

Рекомендации по использованию метода context

  • Всегда явно указывать context, если waypoint находится внутри скроллируемого блока, отличного от window.
  • Использовать refresh() после динамических изменений DOM.
  • Для оптимизации производительности объединять несколько waypoint в один контекст, чтобы уменьшить количество обработчиков прокрутки.
  • Контексты полезны для реализации параллакс-эффектов, «липких» элементов и навигации по внутренним секциям страницы.

Метод context является центральным инструментом для контроля поведения waypoint в сложных макетах с несколькими скроллируемыми контейнерами, обеспечивая гибкость и точность срабатывания событий.

Оглавление