Координаты относительно viewport

Библиотека Cash предоставляет лёгкий и компактный инструмент для работы с DOM, аналогичный jQuery, но с современным подходом. Одной из ключевых задач при работе с DOM является определение положения элементов на странице. Особенно важна работа с координатами относительно viewport, то есть области видимой части страницы, независимо от прокрутки.

Свойство .offset()

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

Пример получения координат:

const el = $('#element');
const offset = el.offset(); 
console.log(offset.top, offset.left);

offset() возвращает объект с двумя свойствами:

  • top — расстояние от верхнего края документа до верхнего края элемента.
  • left — расстояние от левого края документа до левого края элемента.

Чтобы получить координаты относительно viewport:

const viewportTop = offset.top - window.scrollY;
const viewportLeft = offset.left - window.scrollX;

Объяснение: window.scrollY и window.scrollX показывают текущее смещение страницы по вертикали и горизонтали. Вычитая их из координат элемента, получаем положение элемента относительно видимой области.

Метод .position()

Метод .position() в Cash возвращает координаты элемента относительно его offset parent, то есть ближайшего предка с установленным позиционированием (relative, absolute или fixed).

Пример использования:

const position = el.position();
console.log(position.top, position.left);

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

  • Не учитывает прокрутку страницы.
  • Удобен для вычислений внутри контейнеров с позиционированием.
  • Для получения viewport-координат требуется учесть позицию предков и прокрутку.

Работа с методом .getBoundingClientRect()

Для точного вычисления координат элемента относительно viewport в Cash используется стандартный DOM-метод getBoundingClientRect(). Cash предоставляет доступ к нативным элементам через индексированный объект:

const rect = el[0].getBoundingClientRect();
console.log(rect.top, rect.left, rect.width, rect.height);

Возвращаемый объект содержит:

  • top, left — расстояние от верхнего/левого края viewport до элемента.
  • bottom, right — положение нижнего и правого края элемента.
  • width, height — размеры элемента.

getBoundingClientRect() является наиболее надёжным способом получения точных координат относительно видимой области, поскольку автоматически учитывает:

  • текущую прокрутку,
  • размер viewport,
  • возможное масштабирование страницы.

Сравнение методов

Метод Относительно Учитывает прокрутку Применение
.offset() Документа Нет (необходимо вычитать scroll) Расчёт позиции на странице, скролл-подсчёты
.position() Offset parent Нет Позиционирование внутри контейнера
getBoundingClientRect() Viewport Да Точная позиция для анимаций, всплывающих подсказок, фиксации элементов

Примеры практического применения

Фиксация элемента при прокрутке:

const el = $('#header');
const rect = el[0].getBoundingClientRect();

window.addEventListener('scroll', () => {
    if (rect.top < 0) {
        el.css({ position: 'fixed', top: '0' });
    } else {
        el.css({ position: '', top: '' });
    }
});

Определение, виден ли элемент на экране:

function isInViewport(element) {
    const rect = element[0].getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= window.innerHeight &&
        rect.right <= window.innerWidth
    );
}

console.log(isInViewport($('#section')));

Центрирование элемента относительно viewport:

const el = $('#modal');
const rect = el[0].getBoundingClientRect();

el.css({
    position: 'fixed',
    top: `calc(50vh - ${rect.height / 2}px)`,
    left: `calc(50vw - ${rect.width / 2}px)`
});

Резюме по работе с координатами в Cash

  • .offset() — координаты относительно документа, требуется коррекция прокрутки для viewport.
  • .position() — координаты относительно позиционированного родителя, не учитывает прокрутку.
  • getBoundingClientRect() — координаты относительно viewport, точные и удобные для динамических интерфейсов.

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

Оглавление