Параметр context

Параметр context в Waypoints позволяет задать элемент, относительно которого будет отслеживаться появление целевого элемента в области видимости. По умолчанию Waypoints использует window как контекст, то есть отслеживает положение целевого элемента относительно окна браузера. Использование собственного контекста необходимо, когда требуется отслеживать скроллинг внутри контейнера, отличного от окна.

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

var waypoint = new Waypoint({
  element: document.getElementById('myElement'),
  handler: function(direction) {
    console.log('Scrolled to waypoint!', direction);
  },
  context: document.getElementById('scrollContainer')
});
  • element — DOM-элемент, для которого создаётся waypoint.
  • handler — функция обратного вызова, вызываемая при достижении элемента.
  • context — DOM-элемент, выступающий в роли области прокрутки.

Если context не указан, Waypoints автоматически использует глобальный объект window.

Поведение при использовании собственного контекста

  1. Отслеживание прокрутки контейнера При установке context библиотека отслеживает скролл относительно верхней границы этого контейнера. Это особенно полезно для элементов с overflow: scroll или overflow: auto.

  2. Изменение порога срабатывания Параметр offset в сочетании с context рассчитывается относительно верхней границы контейнера. Например:

var waypoint = new Waypoint({
  element: document.getElementById('item'),
  handler: function(direction) {
    console.log('Item reached in container!');
  },
  context: document.getElementById('scrollContainer'),
  offset: '25%'  // сработает, когда элемент будет на 25% от верхней границы контейнера
});
  1. Вложенные контейнеры Waypoints корректно работает с несколькими вложенными скроллируемыми элементами, если каждому из них назначен собственный context. Можно создавать несколько waypoint’ов с разными контекстами для одного элемента, чтобы реагировать на скролл в разных областях.

Практические примеры

Пример 1. Sticky header в скроллируемом контейнере

var container = document.getElementById('scrollContainer');
var header = document.getElementById('header');

new Waypoint({
  element: header,
  handler: function(direction) {
    if (direction === 'down') {
      header.classList.add('sticky');
    } else {
      header.classList.remove('sticky');
    }
  },
  context: container,
  offset: 0
});

В этом примере заголовок становится «липким» только при скролле внутри контейнера, а не всего окна.

Пример 2. Lazy load изображений внутри блока

var images = document.querySelectorAll('.lazy-image');
var scrollArea = document.getElementById('imageContainer');

images.forEach(function(img) {
  new Waypoint({
    element: img,
    handler: function() {
      img.src = img.dataset.src;
      this.destroy(); // отключение waypoint после загрузки
    },
    context: scrollArea,
    offset: '75%'
  });
});

Здесь изображения загружаются, когда они приближаются к 75% высоты видимой части контейнера.

Важные моменты при работе с context

  • CSS-свойства контейнера Контейнер должен иметь явный height и overflow: scroll или overflow: auto. Без этого Waypoints не сможет корректно отслеживать скролл.

  • События resize и контекста Если размер контейнера изменяется динамически, Waypoints автоматически обновляет свои расчёты. Однако при значительном изменении DOM лучше вызывать метод Waypoint.refreshAll() для пересчёта позиций.

  • Производительность Ограничение контекста локальным контейнером уменьшает количество обработок скролла, если страница содержит много waypoint’ов, повышая производительность в больших интерфейсах.

  • Совместимость с sticky и fixed элементами внутри контекста Элементы с position: sticky ведут себя относительно своего контейнера, что совпадает с принципом работы context в Waypoints. При использовании fixed необходимо учитывать смещение, которое задаётся через offset.

Методы и свойства, связанные с context

  • waypoint.context — возвращает объект контекста, используемый для отслеживания скролла.
  • Waypoint.refreshAll() — обновляет позиции всех waypoint’ов, учитывая текущие размеры и позиции контекста.
  • Waypoint.disable() / Waypoint.enable() — временно отключает или включает waypoint в текущем контексте.
  • Waypoint.destroy() — полностью удаляет waypoint и освобождает привязку к контексту.

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

  • Всегда явно указывать context при работе со скроллируемыми блоками.
  • Использовать offset в процентах для адаптивных интерфейсов, чтобы waypoint срабатывал на одинаковой визуальной позиции независимо от размера контейнера.
  • При динамическом добавлении контента вызывать Waypoint.refreshAll() после рендеринга.
  • Комбинировать несколько waypoint’ов с разными контекстами для сложных интерфейсов с внутренними и внешними скроллами.

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

Оглавление