Координаты прокрутки

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

Получение вертикальной и горизонтальной прокрутки окна

Для работы с прокруткой окна используются свойства scrollTop и scrollLeft. Umbrella JS оборачивает стандартные методы, позволяя получать эти значения через объект u(window).

// Получение вертикальной прокрутки окна
let scrollY = u(window).scrollTop();

// Получение горизонтальной прокрутки окна
let scrollX = u(window).scrollLeft();

Методы scrollTop() и scrollLeft() возвращают текущее смещение окна относительно начала документа. Возвращаемое значение всегда числовое, выраженное в пикселях.

Установка координат прокрутки окна

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

// Прокрутка окна на 200px вниз
u(window).scrollTop(200);

// Прокрутка окна на 100px вправо
u(window).scrollLeft(100);

Если нужно прокрутить страницу плавно, Umbrella JS напрямую не предоставляет встроенного метода анимации прокрутки. Однако можно использовать сочетание requestAnimationFrame или стандартного CSS-свойства scroll-behavior: smooth.

u(window).css('scroll-behavior', 'smooth');
u(window).scrollTop(500);

Работа с прокруткой отдельных элементов

Для элементов DOM методы scrollTop() и scrollLeft() ведут себя аналогично окну, возвращая или устанавливая смещение содержимого внутри контейнера с прокруткой.

let container = u('#container');

// Получение текущей прокрутки элемента
let containerScrollY = container.scrollTop();
let containerScrollX = container.scrollLeft();

// Установка прокрутки элемента
container.scrollTop(150);
container.scrollLeft(50);

Эти методы особенно полезны при реализации кастомных скроллбаров, динамической подгрузки контента или эффектов «infinite scroll».

Получение размеров и позиции элемента относительно окна

Umbrella JS предоставляет метод offset(), который возвращает объект с координатами элемента относительно документа:

let box = u('.box');
let position = box.offset();

console.log(position.top);  // Расстояние сверху документа
console.log(position.left); // Расстояние слева документа

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

Комбинированные примеры

Проверка, виден ли элемент в области просмотра:

let viewportHeight = window.innerHeight;
let element = u('.target');
let elementTop = element.offset().top;
let scrollY = u(window).scrollTop();

if (elementTop >= scrollY && elementTop <= scrollY + viewportHeight) {
    console.log('Элемент виден на экране');
}

Прокрутка к элементу с учётом отступа:

let headerHeight = 50; // фиксированный заголовок
let target = u('#section2');

u(window).scrollTop(target.offset().top - headerHeight);

Поддержка цепочек методов

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

u('#container')
    .scrollTop(100)
    .addClass('scrolled')
    .css('border', '1px solid red');

Особенности работы с прокруткой в Umbrella JS

  • Методы scrollTop() и scrollLeft() работают как с окном, так и с любыми элементами, поддерживающими прокрутку.
  • При установке прокрутки передаваемые значения автоматически приводятся к числу.
  • Для элементов с position: fixed методы прокрутки не изменяют позицию фиксированных блоков, но учитываются при вычислении видимости других элементов.
  • Для плавной прокрутки рекомендуется использовать CSS-свойство scroll-behavior: smooth, так как Umbrella JS не реализует анимацию скролла самостоятельно.

Umbrella JS делает работу с прокруткой компактной и лаконичной, предоставляя единый синтаксис для окна и элементов. Методы scrollTop, scrollLeft и offset позволяют легко получать координаты и управлять прокруткой, интегрируя эти операции в цепочки вызовов для комплексных интерфейсных решений.

Оглавление