Программная прокрутка

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

В Dom7 для прокрутки элементов используется метод .scrollTop(), а также связанный с ним метод .scrollLeft(). Эти методы позволяют получать текущую позицию прокрутки элемента или задавать её программно.

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

Чтобы узнать вертикальную позицию прокрутки элемента:

const scrollPosition = $$('.scrollable-element').scrollTop();
console.log(scrollPosition);

Для горизонтальной прокрутки используется аналогичный метод:

const scrollLeft = $$('.scrollable-element').scrollLeft();
console.log(scrollLeft);

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

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

Методы .scrollTop(value) и .scrollLeft(value) позволяют задавать новые координаты прокрутки:

$$('.scrollable-element').scrollTop(200); // вертикальная прокрутка до 200px
$$('.scrollable-element').scrollLeft(150); // горизонтальная прокрутка до 150px

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

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

Для создания анимации прокрутки используется объект параметров с ключом scrollTo и дополнительным указанием duration:

$$('.scrollable-element').scrollTop(500, 300); // прокрутка до 500px за 300 мс

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

$$('.scrollable-element').scrollTop({
  scrollTop: 800,
  duration: 500,
  easing: 'easeInOutCubic'
});

Параметры:

  • scrollTop — вертикальная позиция прокрутки.
  • scrollLeft — горизонтальная позиция.
  • duration — время анимации в миллисекундах.
  • easing — функция сглаживания движения, например 'linear', 'easeIn', 'easeOut', 'easeInOutCubic'.

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

Dom7 позволяет прокрутить контейнер к конкретному дочернему элементу с помощью метода .scrollIntoView():

$$('.scrollable-element .target-item').scrollIntoView({
  duration: 400,
  easing: 'easeInOutCubic',
  offset: 10
});

Особенности параметров:

  • duration — время анимации.
  • easing — функция сглаживания.
  • offset — отступ сверху после прокрутки.

Этот метод особенно полезен для реализации навигации по списку, табам или якорным ссылкам.

Работа с событиями прокрутки

Для отслеживания прокрутки элементов Dom7 предоставляет метод .on('scroll', callback):

$$('.scrollable-element').on('scroll', function (e) {
  console.log('Текущая позиция прокрутки:', $$(this).scrollTop());
});

Удалить обработчик можно с помощью .off():

$$('.scrollable-element').off('scroll');

Интеграция с Framework7

Dom7 тесно интегрируется с компонентами Framework7, такими как page-content или scrollable. Программная прокрутка в этих элементах работает аналогично, но рекомендуется использовать селекторы внутри конкретного компонента страницы:

const pageContent = $$('.page-content');
pageContent.scrollTop(0, 300); // прокрутка наверх текущей страницы

Полезные приёмы

  1. Прокрутка до конца списка:
const scrollable = $$('.scrollable-element');
scrollable.scrollTop(scrollable[0].scrollHeight);
  1. Прокрутка относительно текущей позиции:
const current = $$('.scrollable-element').scrollTop();
$$('.scrollable-element').scrollTop(current + 100);
  1. Динамическая прокрутка к элементу по индексу:
const itemIndex = 3;
const target = $$('.scrollable-element .item').eq(itemIndex);
target.scrollIntoView({duration: 400});

Советы по производительности

  • Использовать .scrollTop() и .scrollLeft() вместо CSS-анимаций для больших списков.
  • Ограничивать количество обработчиков события scroll, особенно на мобильных устройствах.
  • Для плавной прокрутки использовать duration не менее 200 мс, чтобы избежать резких скачков.

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

Оглавление