Работа с viewport

Umbrella JS — это лёгкая библиотека для работы с DOM, упрощающая выбор элементов, манипуляции с ними и обработку событий. Одним из важных аспектов интерактивной веб-разработки является работа с viewport — областью видимости документа, которая видна пользователю на экране. Umbrella JS предоставляет удобные методы для работы с размерами и положением элементов относительно viewport.

Получение размеров viewport

Размеры viewport определяются шириной и высотой окна браузера. В Umbrella JS для этого используется метод window.innerWidth и window.innerHeight, но библиотека упрощает доступ к этим значениям через свои утилиты.

Пример:

const viewportWidth = u(window).width();
const viewportHeight = u(window).height();

console.log('Ширина viewport:', viewportWidth);
console.log('Высота viewport:', viewportHeight);

Метод width() и height() возвращает числовые значения в пикселях, что удобно для дальнейших вычислений, например, для адаптивной верстки или позиционирования элементов.

Проверка видимости элемента в viewport

Umbrella JS позволяет определить, находится ли элемент в пределах видимой области экрана. Для этого используется сочетание методов offset() и размеров viewport.

const element = u('#myElement');
const offset = element.offset()[0]; // { top: ..., left: ... }
const scrollTop = u(window).scrollTop();
const viewportHeight = u(window).height();

if (offset.top >= scrollTop && offset.top <= scrollTop + viewportHeight) {
    console.log('Элемент видим в viewport');
} else {
    console.log('Элемент вне viewport');
}
  • offset() возвращает объект с координатами элемента относительно документа.
  • scrollTop() позволяет получить текущую прокрутку по вертикали.
  • Сравнение этих значений с высотой viewport определяет видимость элемента на экране.

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

Umbrella JS облегчает управление прокруткой. Метод scrollTop() можно использовать не только для получения текущей позиции прокрутки, но и для её установки. Это позволяет программно прокручивать страницу к нужному элементу.

const target = u('#section2');
u('html, body').scrollTop(target.offset()[0].top);

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

Параллакс и реакция на скролл

Работа с viewport тесно связана с обработкой скролла. Umbrella JS позволяет навешивать события скролла на окно и получать текущую позицию видимой области.

u(window).on('scroll', function() {
    const scrollPosition = u(window).scrollTop();
    u('.parallax').css({
        transform: `translateY(${scrollPosition * 0.5}px)`
    });
});
  • on('scroll', callback) — навешивает обработчик события прокрутки.
  • Позиция прокрутки используется для создания эффектов движения элементов относительно скролла.
  • Применение transform: translateY обеспечивает плавную и производительную анимацию, так как работает на GPU.

Отслеживание выхода и входа элемента в viewport

Для реализации ленивой загрузки изображений или анимаций часто требуется определить, когда элемент появляется или исчезает из видимой области. Umbrella JS позволяет комбинировать методы offset() и текущую прокрутку.

function isInViewport(el) {
    const offset = u(el).offset()[0];
    const scrollTop = u(window).scrollTop();
    const viewportHeight = u(window).height();

    return offset.top < scrollTop + viewportHeight && offset.top + u(el).height() > scrollTop;
}

u('.lazy-image').each(function(el) {
    if (isInViewport(el)) {
        u(el).attr('src', u(el).attr('data-src'));
    }
});
  • Метод each() перебирает все выбранные элементы.
  • attr('data-src') используется для хранения реального URL изображения до момента его загрузки.
  • Проверка с помощью isInViewport позволяет загружать контент только при попадании элемента в видимую область, что улучшает производительность страницы.

Адаптивное позиционирование элементов

Размеры viewport могут динамически изменяться при изменении размеров окна браузера. Umbrella JS позволяет отслеживать это с помощью события resize.

u(window).on('resize', function() {
    const viewportHeight = u(window).height();
    const header = u('#header');

    if (viewportHeight < 600) {
        header.css({ fontSize: '14px' });
    } else {
        header.css({ fontSize: '20px' });
    }
});
  • Событие resize срабатывает при изменении размеров окна.
  • Использование методов css() и height() позволяет динамически адаптировать интерфейс к доступной видимой области.

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

Umbrella JS упрощает вычисления относительных позиций элементов. Это полезно для реализации sticky-элементов, залипания панелей или проверки пересечения элементов.

const a = u('#elementA').offset()[0].top;
const b = u('#elementB').offset()[0].top;

if (a < b) {
    console.log('Element A выше Element B');
}

Методы offset() и height() позволяют строить сложные условия для позиционирования и анимации элементов в зависимости от их местоположения в viewport.

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

  • u(window).width() и u(window).height() — размеры viewport.
  • u(window).scrollTop() — текущая прокрутка.
  • offset() — координаты элемента относительно документа.
  • on('scroll', callback) и on('resize', callback) — обработка скролла и изменения размеров.
  • Проверка видимости элемента в viewport позволяет реализовать ленивую загрузку и анимации.
  • Комбинация этих методов позволяет строить адаптивные интерфейсы и динамические эффекты с высокой производительностью.

Работа с viewport в Umbrella JS объединяет простоту вызовов, точность позиционирования и эффективность вычислений, что делает библиотеку удобным инструментом для интерактивной веб-разработки.

Оглавление