Колбэки enter и exit

Колбэки enter и exit используются для отслеживания момента, когда элемент пересекает границу области видимости (viewport) при прокрутке страницы. Эти обработчики позволяют точно реагировать на появление и исчезновение элемента относительно заданной точки (offset).

Принцип работы

Библиотека Waypoints отслеживает позицию элемента относительно viewport. Когда элемент достигает определённой позиции, срабатывает один из двух ключевых колбэков:

  • enter — вызывается в момент входа элемента в область отслеживания
  • exit — вызывается в момент выхода элемента из этой области

Оба колбэка получают аргумент direction, который указывает направление прокрутки:

  • "down" — прокрутка вниз
  • "up" — прокрутка вверх

Сигнатура колбэков

function(direction) {
  // direction: 'up' или 'down'
}

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

const waypoint = new Waypoint({
  element: document.getElementById('section'),
  handler: function(direction) {
    if (direction === 'down') {
      console.log('Элемент вошёл в область');
    } else {
      console.log('Элемент вышел из области');
    }
  },
  offset: '50%'
});

В этом примере используется универсальный handler, который фактически объединяет поведение enter и exit. Однако для более явной логики часто разделяют события.

Использование через Shortcut API (inview)

Waypoints предоставляет специальный shortcut — Inview, который явно реализует enter и exit:

const inview = new Waypoint.Inview({
  element: document.getElementById('block'),
  enter: function(direction) {
    console.log('Вход:', direction);
  },
  entered: function(direction) {
    console.log('Полностью внутри:', direction);
  },
  exit: function(direction) {
    console.log('Выход:', direction);
  },
  exited: function(direction) {
    console.log('Полностью вышел:', direction);
  }
});

Различия между enter, entered, exit, exited

Колбэк Когда вызывается
enter Когда элемент начинает входить во viewport
entered Когда элемент полностью оказался внутри
exit Когда элемент начинает покидать viewport
exited Когда элемент полностью вышел

Это разделение важно при работе с частичной видимостью элементов.

Работа с offset

Параметр offset определяет точку срабатывания:

offset: '75%'

Это означает, что событие enter произойдёт, когда верх элемента достигнет 75% высоты viewport.

Можно использовать:

  • проценты ('50%')
  • пиксели ('200px')
  • функцию
offset: function() {
  return window.innerHeight - 100;
}

Пример: анимация при появлении

new Waypoint.Inview({
  element: document.querySelector('.fade-in'),
  enter: function() {
    this.element.classList.add('visible');
  },
  exit: function() {
    this.element.classList.remove('visible');
  }
});

CSS:

.fade-in {
  opacity: 0;
  transition: opacity 0.5s;
}

.fade-in.visible {
  opacity: 1;
}

Направление прокрутки

Аргумент direction позволяет реализовывать разные сценарии:

enter: function(direction) {
  if (direction === 'down') {
    console.log('Прокрутка вниз — элемент появился');
  } else {
    console.log('Прокрутка вверх — элемент снова появился');
  }
}

Это полезно, например, для:

  • ленивой загрузки
  • обратных анимаций
  • sticky-элементов

Частые сценарии использования

1. Lazy loading изображений

enter: function() {
  const img = this.element;
  img.src = img.dataset.src;
}

2. Запуск анимаций только один раз

enter: function() {
  this.element.classList.add('animate');
  this.destroy(); // отключение waypoint
}

3. Слежение за активной секцией (scrollspy)

enter: function() {
  document.querySelector('.active').classList.remove('active');
  document.querySelector(`a[href="#${this.element.id}"]`).classList.add('active');
}

Удаление и управление waypoint

Каждый waypoint можно отключить:

waypoint.destroy();

Или временно отключить:

waypoint.disable();
waypoint.enable();

Особенности и подводные камни

  • Колбэки могут вызываться несколько раз при быстрой прокрутке
  • Неправильный offset может приводить к преждевременным срабатываниям
  • При динамическом изменении DOM необходимо пересчитывать позиции:
Waypoint.refreshAll();

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

Для оптимальной работы:

  • избегать тяжёлых операций внутри enter и exit
  • использовать requestAnimationFrame при сложных анимациях
  • минимизировать количество одновременно активных waypoint’ов

Взаимодействие с другими событиями

Waypoints часто комбинируется с:

  • CSS-анимациями
  • Intersection Observer (в современных проектах как альтернатива)
  • библиотеками анимации (GSAP, anime.js)

Внутренний механизм

Waypoints хранит список всех наблюдаемых элементов и пересчитывает их позиции при:

  • прокрутке (scroll)
  • изменении размера окна (resize)
  • ручном вызове refresh

Колбэки enter и exit вызываются на основе сравнения предыдущего и текущего положения элемента относительно точки срабатывания.

Итоговая структура логики

new Waypoint.Inview({
  element: el,
  enter: onEnter,
  exit: onExit,
  offset: '50%'
});

Где:

  • onEnter — реакция на появление
  • onExit — реакция на исчезновение
  • offset — контроль точки срабатывания

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

Оглавление