Типичные ошибки

Неправильное подключение скрипта Waypoints требует корректного подключения основной библиотеки и зависимостей. Часто встречается ситуация, когда библиотека подключена после скрипта, который создаёт Waypoint. В результате браузер выдаёт ошибку Waypoint is not defined. Правильный порядок: сначала подключение jQuery (если используется jQuery Waypoints), затем сама библиотека, и только потом инициализация точек.

Создание Waypoint до полной загрузки DOM Инициализация Waypoints на элементах, которых ещё нет в DOM, приводит к отсутствию срабатываний. Для jQuery-подхода это решается через $(document).ready(), для vanilla JS — через событие DOMContentLoaded. Пример корректной инициализации:

document.addEventListener('DOMContentLoaded', function() {
    new Waypoint({
        element: document.getElementById('section1'),
        handler: function(direction) {
            console.log('Waypoint сработал');
        }
    });
});

Использование неверного селектора Часто указывают селектор, который возвращает null или пустой NodeList. Waypoints создаёт точку только на существующих элементах, поэтому всегда нужно проверять, что селектор действительно находит элементы. В случае с jQuery Waypoints рекомендуется проверка длины:

if ($('#section1').length) {
    new Waypoint({ element: document.getElementById('section1'), handler: function(){ } });
}

Ошибки при настройке опций

Неверное значение offset offset задаёт смещение точки срабатывания относительно верха страницы. Ошибки возникают, когда указано значение, превышающее высоту документа или задано в неправильном формате. Правильные форматы: число в пикселях (100), процент ('50%') или функция, возвращающая число. Пример:

new Waypoint({
    element: document.getElementById('section2'),
    handler: function(direction) { console.log(direction); },
    offset: '75%'
});

Игнорирование направления Waypoints передаёт аргумент direction в обработчик. Частая ошибка — запуск одинаковых действий при скролле вверх и вниз без учёта этого параметра. Для точной логики нужно проверять:

handler: function(direction) {
    if (direction === 'down') {
        console.log('Скролл вниз');
    } else {
        console.log('Скролл вверх');
    }
}

Неверное использование context Контекст (context) указывает элемент, внутри которого отслеживается прокрутка. Ошибка — установка контекста на элемент, который не скроллится. В результате Waypoint никогда не срабатывает. Если контекст — окно браузера, параметр можно опустить.

Проблемы с динамическим контентом

Элементы появляются после инициализации Waypoints не отслеживает автоматически динамически добавленные элементы. При добавлении новых секций через AJAX или JS их нужно инициализировать заново. Например:

function initNewWaypoints() {
    document.querySelectorAll('.new-section').forEach(el => {
        new Waypoint({ element: el, handler: function(){ console.log('Dynamic Waypoint'); } });
    });
}

Удаление элементов без destroy Если элемент удаляется, а Waypoint остаётся, это может вызвать ошибки или утечки памяти. Для удаления точки нужно вызвать метод destroy:

var wp = new Waypoint({ element: document.getElementById('section3'), handler: function(){ } });
wp.destroy();

Частые ошибки при работе с группами и sticky-элементами

Неправильное использование группы Waypoints позволяет объединять точки в группы для синхронизации срабатываний. Ошибка — назначение разных групп с одинаковым именем или отсутствие группировки при необходимости. Это ведёт к конфликтам с offset и неправильному поведению sticky-элементов.

Sticky элементы не «прилипают» Sticky Waypoints требует корректной структуры: родительский элемент должен иметь высоту больше самого sticky-элемента. Частая ошибка — установка sticky на элемент с родителем высотой меньше окна, что делает «прилипание» невозможным.

Ошибки в оптимизации и производительности

Слишком много точек без throttle/debounce Создание сотен Waypoints на одной странице без оптимизации замедляет скролл. Рекомендуется использовать Waypoint.refreshAll() после изменения DOM, а также объединять события через groups для уменьшения количества срабатываний.

Игнорирование destroy и off при SPA В одностраничных приложениях старые Waypoints остаются активными после перехода на другую страницу, создавая лишние обработчики. Нужно обязательно уничтожать старые точки перед рендером нового контента.

Ошибки при отладке

Отсутствие логирования Waypoints сложно отлаживать без проверки срабатываний. Частая ошибка — полагаться на визуальные эффекты. Для отладки рекомендуется добавлять console.log(direction) или временно изменять стиль элемента при срабатывании.

Необновление после изменения размеров окна Изменение размера страницы влияет на offset и позицию элементов. Если не вызвать Waypoint.refreshAll() после изменений DOM или ресайза, точки могут срабатывать раньше или позже ожидаемого момента.

window.addEventListener('resize', function() {
    Waypoint.refreshAll();
});

Ошибки, описанные выше, встречаются наиболее часто и приводят к тому, что Waypoints не работает или работает некорректно. Их понимание и систематическая проверка при инициализации позволяют создавать стабильные и предсказуемые эффекты прокрутки.

Оглавление