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

Библиотека Dom7 предоставляет удобный API для работы с DOM-элементами, включая управление событиями прокрутки. События прокрутки позволяют отслеживать движение страницы или конкретного элемента и реагировать на него, например, для реализации «липких» шапок, эффектов параллакса или динамической подгрузки контента.

Подключение обработчиков событий прокрутки

Dom7 использует метод on для привязки обработчиков к событиям. Событие прокрутки обозначается как 'scroll'.

import Dom7 from 'dom7';

const $content = Dom7('.content');

$content.on('scroll', function (event) {
    console.log('Прокрутка произошла', event.target.scrollTop);
});

В примере $content — это коллекция элементов Dom7. В обработчике доступен объект события event, а свойство event.target.scrollTop возвращает текущее смещение по вертикали внутри элемента.

Отслеживание прокрутки окна

Для отслеживания прокрутки всей страницы используется объект window. Dom7 позволяет писать:

Dom7(window).on('scroll', function () {
    const scrollPos = window.scrollY || document.documentElement.scrollTop;
    console.log('Скролл окна:', scrollPos);
});

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

  • scrollY или document.documentElement.scrollTop — кроссбраузерные способы получения вертикальной позиции.
  • Обработчики прокрутки вызываются очень часто, поэтому рекомендуется использовать дебаунс или троттлинг для оптимизации производительности.

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

Dom7 предоставляет метод off, позволяющий удалять обработчики:

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

$content.on('scroll', onScroll);

// Позже можно удалить обработчик
$content.off('scroll', onScroll);

Удаление обработчиков предотвращает утечки памяти и снижает нагрузку на браузер.

Применение прокрутки к конкретным элементам

Событие 'scroll' можно использовать не только на window, но и на элементах с прокруткой. Например, для блока с фиксированной высотой и overflow: auto:

const $box = Dom7('.scroll-box');

$box.on('scroll', function (event) {
    const scrollTop = event.target.scrollTop;
    const scrollHeight = event.target.scrollHeight;
    const clientHeight = event.target.clientHeight;

    if (scrollTop + clientHeight >= scrollHeight) {
        console.log('Достигнут низ блока');
    }
});

Здесь вычисляется, когда пользователь доскроллил до конца блока, что полезно для реализации бесконечной подгрузки контента.

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

Для анализа направления движения можно хранить предыдущую позицию и сравнивать с текущей:

let lastScrollTop = 0;

Dom7(window).on('scroll', function () {
    const st = window.scrollY || document.documentElement.scrollTop;

    if (st > lastScrollTop) {
        console.log('Прокрутка вниз');
    } else {
        console.log('Прокрутка вверх');
    }

    lastScrollTop = st <= 0 ? 0 : st; // предотвращение отрицательных значений
});

Такой подход часто используется для скрытия или отображения элементов интерфейса в зависимости от направления скролла.

Оптимизация событий прокрутки

События прокрутки вызываются очень часто, что может замедлять страницу. Для повышения производительности применяются техники:

  1. Throttling (троттлинг) — ограничение частоты вызовов функции.
  2. Debouncing (дебаунс) — выполнение функции после окончания прокрутки.

Пример троттлинга через requestAnimationFrame:

let ticking = false;

Dom7(window).on('scroll', function () {
    if (!ticking) {
        window.requestAnimationFrame(function () {
            console.log('Обновление при прокрутке');
            ticking = false;
        });
        ticking = true;
    }
});

Такой метод гарантирует вызов функции один раз на каждый кадр, что экономит ресурсы.

Дополнительные возможности

Dom7 позволяет комбинировать события прокрутки с другими методами, например, анимацией элементов или динамическим изменением классов:

const $header = Dom7('.header');

Dom7(window).on('scroll', function () {
    if (window.scrollY > 100) {
        $header.addClass('header--scrolled');
    } else {
        $header.removeClass('header--scrolled');
    }
});

Это часто используется для создания «липких» шапок и изменения стиля при прокрутке страницы.

Итоговые возможности

События прокрутки в Dom7 обеспечивают:

  • Привязку и удаление обработчиков (on / off).
  • Работа с прокруткой окна и элементов с overflow.
  • Отслеживание позиции, направления и достижения конца прокрутки.
  • Оптимизацию через троттлинг и дебаунс.
  • Взаимодействие с классами, стилями и анимацией.

Эти возможности позволяют создавать интерактивные, отзывчивые интерфейсы с высокой производительностью и полной управляемостью прокрутки.

Оглавление