События прокрутки

Umbrella JS — легковесная библиотека для работы с DOM, предоставляющая удобный и лаконичный синтаксис для манипуляций с элементами, управления событиями и анимаций. Одной из важных категорий событий являются события прокрутки (scroll). Они применяются для отслеживания положения окна браузера или прокручиваемых элементов, реализации ленивой загрузки контента, эффектов параллакса и динамического изменения интерфейса при движении страницы.

Привязка события прокрутки

Для привязки обработчика события прокрутки в Umbrella JS используется метод .on(). В качестве события указывается строка 'scroll', а вторым аргументом передаётся функция-обработчик:

u(window).on('scroll', function() {
    console.log('Страница прокручена');
});

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

  • window необходимо оборачивать через u(), поскольку Umbrella JS работает с объектами DOM.
  • Обработчик вызывается каждый раз при изменении положения прокрутки.
  • Для элементов с прокруткой можно использовать тот же подход, например: u('#scrollable').on('scroll', handler);.

Получение позиции прокрутки

Umbrella JS предоставляет метод .scrollTop() для получения текущей вертикальной позиции прокрутки элемента:

let scrollPosition = u(window).scrollTop();
console.log('Прокрутка сверху:', scrollPosition);

Если вызвать .scrollTop() с аргументом, можно программно изменять позицию прокрутки:

u(window).scrollTop(200); // Прокрутка страницы вниз на 200 пикселей

Для горизонтальной прокрутки используется .scrollLeft():

let scrollLeft = u('#scrollable').scrollLeft();
u('#scrollable').scrollLeft(100);

Дебаунс и оптимизация

Событие scroll вызывается очень часто, что может привести к падению производительности при выполнении тяжёлых вычислений или манипуляций с DOM. Umbrella JS не включает встроенный механизм дебаунса, но можно использовать стандартные приёмы с таймерами:

let timer;
u(window).on('scroll', function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
        console.log('Оптимизированная прокрутка');
    }, 100);
});

Пояснение:

  • clearTimeout предотвращает выполнение предыдущих вызовов, если прокрутка продолжается.
  • Таймаут 100 мс позволяет обработчику вызываться реже, снижая нагрузку на браузер.

Отслеживание появления элементов на экране

Комбинируя .scrollTop() и размеры окна, можно определить, когда элемент появляется в видимой области:

u(window).on('scroll', function() {
    u('.animate').each(function(el) {
        let elemTop = u(el).offset().top;
        let windowBottom = u(window).scrollTop() + window.innerHeight;
        if (windowBottom > elemTop) {
            u(el).addClass('visible');
        }
    });
});

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

  • .offset().top возвращает координату элемента относительно верхней границы документа.
  • window.innerHeight используется для вычисления видимой области окна.
  • При превышении позиции элемента добавляется класс, запускающий анимацию.

Удаление обработчиков

Для управления производительностью и предотвращения утечек памяти важно уметь удалять обработчики прокрутки. В Umbrella JS применяется метод .off():

function onScroll() {
    console.log('Прокрутка обработана');
}

u(window).on('scroll', onScroll);

// Позже обработчик можно снять
u(window).off('scroll', onScroll);

Если требуется удалить все обработчики прокрутки, достаточно вызвать:

u(window).off('scroll');

Комбинирование с другими событиями

События прокрутки часто комбинируют с событиями изменения размера окна (resize) для динамического пересчёта позиций элементов:

function checkElements() {
    u('.animate').each(function(el) {
        let elemTop = u(el).offset().top;
        let windowBottom = u(window).scrollTop() + window.innerHeight;
        if (windowBottom > elemTop) u(el).addClass('visible');
    });
}

u(window).on('scroll', checkElements);
u(window).on('resize', checkElements);

Такой подход гарантирует корректную работу при изменении размеров окна или ориентации устройства.

Практические советы

  • Не привязывать сложную логику напрямую к событию scroll. Использовать дебаунс или requestAnimationFrame.
  • Для элементов с динамически изменяемым контентом периодически обновлять координаты через .offset().top.
  • Для горизонтальных скроллов использовать .scrollLeft() и .offset().left().
  • Для эффекта «прилипшего» меню можно динамически добавлять/снимать классы на основе .scrollTop().

События прокрутки в Umbrella JS обеспечивают гибкий и лёгкий способ управления интерактивностью страницы, сочетая простоту синтаксиса с высокой производительностью при грамотной оптимизации.

Оглавление