Методы экземпляра

Библиотека Waypoints предоставляет удобный API для отслеживания прокрутки страницы и выполнения функций при достижении определённых элементов. Основная работа ведётся через экземпляры Waypoint, созданные для конкретных DOM-элементов. Каждый экземпляр имеет набор методов, позволяющих управлять поведением, изменять настройки и удалять обработчики.

destroy()

Метод destroy() полностью удаляет экземпляр Waypoint, освобождая связанные ресурсы и отключая обработку события прокрутки для данного элемента.

var waypoint = new Waypoint({
  element: document.getElementById('section1'),
  handler: function(direction) {
    console.log('Достигнут элемент');
  }
});

waypoint.destroy(); // Экземпляр больше не реагирует на скролл

Ключевые моменты:

  • Экземпляр нельзя будет повторно активировать после вызова destroy().
  • Полезно использовать для динамически создаваемых элементов или при смене контента на странице.
  • Не удаляет сам элемент DOM, только функциональность Waypoint.

enable()

Метод enable() активирует экземпляр Waypoint, если он был ранее отключён.

waypoint.disable(); // Отключение
waypoint.enable();  // Включение обратно

Особенности:

  • После включения обработчик снова будет срабатывать при прокрутке.
  • Позволяет временно приостановить реакции на скролл без уничтожения экземпляра.
  • Работает независимо от других экземпляров на странице.

disable()

Метод disable() деактивирует экземпляр Waypoint, предотвращая вызов обработчика при прокрутке.

waypoint.disable();

Важно знать:

  • Полезен для оптимизации производительности при множественных экземплярах.
  • Экземпляр остаётся в DOM и может быть повторно включён через enable().
  • Не влияет на другие Waypoints.

context()

Метод context() возвращает объект Context, к которому привязан экземпляр Waypoint. Контекст отвечает за отслеживание прокрутки и пересчёт позиции элементов.

var context = waypoint.context();
console.log(context); // Объект контекста Waypoints

Применение:

  • Полезно для доступа к внутренним настройкам контекста.
  • Позволяет управлять обработкой событий на уровне контейнера, а не отдельных элементов.
  • Позволяет пересчитывать Waypoints при изменении размеров или контента через context.refresh().

next() и previous()

Методы next() и previous() позволяют перемещаться по списку Waypoints внутри одного контекста относительно текущего элемента.

var nextWaypoint = waypoint.next();
var prevWaypoint = waypoint.previous();

Особенности:

  • Возвращают следующий или предыдущий активный Waypoint.
  • Используются для навигации между секциями или для реализации пошаговых эффектов при скролле.
  • Если соседних Waypoints нет, возвращается undefined.

trigger(direction)

Метод trigger() вручную инициирует срабатывание обработчика Waypoint. Параметр direction задаёт направление скролла: "up" или "down".

waypoint.trigger('down'); // Имитирует прокрутку вниз
waypoint.trigger('up');   // Имитирует прокрутку вверх

Применение:

  • Позволяет программно запускать анимации или действия без фактической прокрутки.
  • Используется в комбинации с disable()/enable() для точного контроля последовательности событий.

adapter()

Метод adapter() возвращает адаптер Waypoints для работы с конкретным DOM-элементом. Адаптер скрывает различия между библиотеками для работы с элементами, такими как jQuery или Zepto.

var $element = waypoint.adapter().$element;
console.log($element); // Возвращает объект jQuery/Zepto или оригинальный DOM

Примечания:

  • Полезно для доступа к функционалу библиотеки без прямой зависимости от jQuery.
  • Позволяет безопасно изменять содержимое элемента, не нарушая работу Waypoint.

offset()

Метод offset() возвращает или устанавливает смещение для Waypoint относительно его контекста. Смещение определяет, на каком расстоянии от верхней границы контекста сработает обработчик.

var currentOffset = waypoint.offset(); // Получение текущего значения
waypoint.offset(100);                  // Установка нового смещения

Особенности:

  • Смещение может быть задано как число (px), функция или строка в процентах.
  • Позволяет динамически изменять точки срабатывания без пересоздания Waypoint.
  • После изменения смещения рекомендуется использовать context.refresh() для пересчёта позиций.

group()

Метод group() возвращает группу Waypoints, к которой относится данный экземпляр. Группы управляют срабатыванием нескольких Waypoints вместе.

var group = waypoint.group();
group.each(function(wp) {
  console.log(wp.element);
});

Применение:

  • Удобно для синхронизации анимаций нескольких элементов.
  • Группы обеспечивают пакетную обработку событий и предотвращают избыточные вызовы обработчиков.
  • Позволяют изменять порядок срабатывания Waypoints при прокрутке.

refresh()

Метод refresh() пересчитывает позиции всех Waypoints в контексте. Необходимо при динамическом изменении размеров элементов или их положения на странице.

waypoint.context().refresh();

Ключевые моменты:

  • Обязательно при добавлении/удалении элементов, изменении высоты контента или после анимаций.
  • Без вызова refresh() срабатывания могут происходить некорректно.
  • Производительность: рекомендуется вызывать редко, например, после завершения всех изменений DOM.

Эти методы экземпляра образуют основу управления Waypoints на уровне отдельных элементов и контекста. Правильное использование enable(), disable(), destroy() и refresh() обеспечивает стабильную работу скролл-эффектов, а методы trigger(), offset() и group() дают гибкий контроль над поведением элементов.

Оглавление