Параметр enabled

Параметр enabled в библиотеке Waypoints отвечает за управление активностью конкретного waypoint. Он позволяет включать или отключать обработку события, связанного с появлением элемента в области видимости, без удаления самого waypoint и без необходимости переписывать логику скролла.

Основное назначение

enabled является логическим свойством объекта waypoint. Его значение может быть:

  • true — waypoint активен, события срабатывают при достижении позиции элемента;
  • false — waypoint временно деактивирован, скроллинг не вызывает обработчики.

Использование enabled позволяет:

  • Временно приостанавливать реакции на скролл;
  • Управлять большим количеством waypoint’ов динамически;
  • Сохранять структуру кода, не удаляя и не пересоздавая waypoint.

Создание waypoint с управлением enabled

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

По умолчанию waypoint создается активным. Присвоение enabled: false при инициализации сразу блокирует его.

Методы управления enabled

Waypoints предоставляет встроенные методы для включения и отключения waypoint:

waypoint.disable()

Отключает waypoint, эквивалентно установке enabled = false.

waypoint.disable();
console.log(waypoint.enabled); // false

После вызова disable() waypoint перестает реагировать на скролл.

waypoint.enable()

Включает waypoint, эквивалентно установке enabled = true.

waypoint.enable();
console.log(waypoint.enabled); // true

После вызова enable() waypoint снова активен и срабатывает при пересечении элемента.

Примеры динамического управления

Деактивация waypoint после первого срабатывания

var firstWaypoint = new Waypoint({
  element: document.getElementById('intro'),
  handler: function(direction) {
    console.log('Сработал первый waypoint!');
    this.disable(); // Деактивируем после первого вызова
  }
});

Включение waypoint при определенном условии

var sectionWaypoint = new Waypoint({
  element: document.getElementById('section2'),
  handler: function(direction) {
    if (direction === 'down') {
      console.log('Секция активна только при скролле вниз');
      this.disable(); // Отключаем, чтобы не срабатывал снова
    }
  }
});

// Позже можно снова включить waypoint
setTimeout(() => {
  sectionWaypoint.enable();
}, 5000);

Особенности использования

  1. Не влияет на другие waypoint’ы — изменение enabled действует только на конкретный объект.
  2. Можно комбинировать с другими методами — например, destroy(), disable(), enable() могут использоваться в зависимости от состояния страницы.
  3. Полезно для анимаций — временная деактивация waypoint позволяет управлять анимациями и эффектами при скролле, предотвращая повторные срабатывания.

Внутреннее поведение

При установке enabled = false библиотека:

  • Исключает waypoint из расчета при скролле;
  • Прекращает вызов функции handler до повторного включения;
  • Сохраняет все параметры и состояние waypoint для последующего использования.

Это позволяет динамически управлять поведением скролл-триггеров без пересоздания объектов.

Советы по применению

  • Для однократных событий лучше комбинировать handler с disable(), чтобы waypoint не срабатывал повторно.
  • Для динамического контента можно включать и отключать waypoint в зависимости от состояния страницы, размеров окна или взаимодействия пользователя.
  • Для оптимизации производительности временное отключение waypoint предотвращает лишние вычисления при скролле.

Итоговое резюме по enabled

enabled является ключевым инструментом для управления активностью waypoint без их удаления. Использование disable() и enable() позволяет гибко контролировать события скролла, предотвращать ненужные срабатывания и улучшать производительность, особенно на страницах с большим количеством waypoint’ов.

Оглавление