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

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

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

Для любого выбранного элемента Dom7 предоставляет методы .scrollTop() и .scrollLeft(), которые позволяют узнать текущую позицию прокрутки по вертикали и по горизонтали соответственно.

// Получение прокрутки окна документа
var scrollY = $(window).scrollTop();
var scrollX = $(window).scrollLeft();

// Получение прокрутки конкретного элемента
var myElement = $('.my-element');
var elementScrollY = myElement.scrollTop();
var elementScrollX = myElement.scrollLeft();

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

  • .scrollTop() возвращает число пикселей, на которое элемент прокручен сверху.
  • .scrollLeft() возвращает число пикселей, на которое элемент прокручен слева.
  • Если элемент не прокручиваемый, методы вернут 0.
  • Для окна (window) методы всегда возвращают текущую прокрутку документа.

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

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

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

// Прокрутка конкретного блока влево на 50px
$('.my-element').scrollLeft(50);

При передаче числового значения библиотека изменяет текущее положение прокрутки, сохраняя все существующие события прокрутки.

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

Dom7 упрощает работу с событиями прокрутки через метод .on('scroll', callback). Это позволяет реагировать на изменение положения прокрутки в реальном времени.

$('.my-element').on('scroll', function() {
  var scrollPosition = $(this).scrollTop();
  console.log('Текущая вертикальная прокрутка: ' + scrollPosition);
});

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

  • Событие scroll может срабатывать очень часто. Для тяжелых операций стоит использовать requestAnimationFrame или debounce.
  • Для отслеживания прокрутки окна можно применить:
$(window).on('scroll', function() {
  var scrollY = $(window).scrollTop();
  // оптимизированная обработка прокрутки
});

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

Чтобы корректно управлять позиционированием и эффектами, важно знать размеры элемента и его максимальную прокрутку. Dom7 предоставляет свойства .prop() и методы для работы с размерами:

var el = $('.my-element');
var scrollHeight = el.prop('scrollHeight'); // полная высота содержимого
var clientHeight = el.prop('clientHeight'); // высота видимой области
var maxScroll = scrollHeight - clientHeight; // максимальная прокрутка по вертикали

Пояснения:

  • scrollHeight — общая высота содержимого, включая невидимую часть.
  • clientHeight — высота видимой области элемента.
  • Разница scrollHeight - clientHeight дает максимальное значение для .scrollTop(). Аналогично для горизонтальной прокрутки используется scrollWidth - clientWidth.

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

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

var container = $('.scroll-container');
var target = $('.target-element');

container.scrollTop(target[0].offsetTop);
  • offsetTop возвращает расстояние от верхнего края родителя до элемента.
  • Такой способ полезен для реализации анкорной навигации или скроллинга по списку.

Плавная прокрутка

Dom7 не имеет встроенной анимации прокрутки, но её можно реализовать через CSS-свойство scroll-behavior или с использованием JavaScript-анимации:

.scroll-container {
  scroll-behavior: smooth;
}

После этого любые изменения .scrollTop() будут происходить плавно, без резкого скачка позиции.

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

var container = $('.scroll-container');
container.on('scroll', function() {
  var scroll = $(this).scrollTop();
  console.log('Прокрутка: ' + scroll + 'px');

  if (scroll > 100) {
    $('.header').addClass('scrolled');
  } else {
    $('.header').removeClass('scrolled');
  }
});

// Прокрутка к элементу при клике
$('.scroll-to-btn').on('click', function() {
  var target = $('.target-element');
  container.scrollTop(target[0].offsetTop);
});

В этом примере объединены методы получения прокрутки, обработка событий и программное управление положением, что является типичной практикой при работе с интерфейсами на Dom7.

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

Оглавление