scroll управление прокруткой

Quasar Framework предоставляет мощный набор инструментов для работы с прокруткой как на уровне страниц, так и отдельных компонентов. Контроль над прокруткой позволяет создавать динамичные интерфейсы, реализовывать ленивую загрузку, плавные переходы и улучшать пользовательский опыт.

Прокрутка страницы и элементов

Quasar использует собственные директивы и утилиты для работы с прокруткой. Основные подходы включают:

  1. Директива v-scroll Директива позволяет отслеживать события прокрутки на любом контейнере. Синтаксис:
<div v-scroll="onScroll" style="height: 300px; overflow-y: auto;">
  <div v-for="i in 50" :key="i">Элемент {{ i }}</div>
</div>
export default {
  methods: {
    onScroll(evt) {
      const scrollTop = evt.target.scrollTop;
      console.log('Прокрутка: ', scrollTop);
    }
  }
}

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

  • evt.target.scrollTop — текущая вертикальная позиция прокрутки.
  • Можно ограничивать обработку через debounce для оптимизации производительности.
  1. Компонент QPage и QLayout Внутри QLayout компоненты QPage поддерживают автоматическую прокрутку при навигации. Для программного контроля используется метод:
this.$q.pageScrollTo('#target-element', 500, () => {
  console.log('Прокрутка завершена');
});

Аргументы метода:

  • Селектор или элемент DOM (#target-element).
  • Продолжительность анимации в миллисекундах.
  • Коллбэк после завершения прокрутки.

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

Quasar предоставляет утилиту $q.pageScrollTo для плавного перемещения к конкретным позициям или элементам.

this.$q.pageScrollTo(0, 300); // Прокрутка к 300px от верхнего края

Можно использовать объект с опциями:

this.$q.pageScrollTo('#footer', {
  duration: 800,
  offset: 50,
  easing: 'easeInOutCubic'
});

Опции:

  • duration — время анимации в миллисекундах.
  • offset — смещение от целевого элемента.
  • easing — тип плавности анимации, поддерживаются стандартные кривые CSS.

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

Quasar позволяет реагировать на прокрутку с помощью утилиты scroll.setVerticalScrollPosition и прослушивания событий на window:

import { scroll } from 'quasar';

scroll.setVerticalScrollPosition(200); // Установить прокрутку на 200px

window.addEventListener('scroll', () => {
  const pos = scroll.getVerticalScrollPosition();
  console.log('Текущая позиция: ', pos);
});

Методы scroll объекта:

  • getVerticalScrollPosition() — возвращает текущую вертикальную позицию.
  • setVerticalScrollPosition(position: number) — устанавливает позицию прокрутки.
  • scrollToElement(element, duration, offset) — прокрутка к конкретному элементу с опциями.

Ленивое подгружение контента

Для длинных списков и таблиц важна оптимизация прокрутки. Quasar предлагает компонент QInfiniteScroll:

<q-infinite-scroll
  :handler="loadMore"
  :offset="100"
>
  <div v-for="item in items" :key="item.id">{{ item.text }}</div>
</q-infinite-scroll>
export default {
  data() {
    return { items: [] };
  },
  methods: {
    loadMore(done) {
      fetch('/api/data')
        .then(res => res.json())
        .then(data => {
          this.items.push(...data);
          done(); // сообщает компоненту, что загрузка завершена
        });
    }
  }
}

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

  • offset — расстояние от низа контейнера, при котором срабатывает загрузка.
  • Метод done() обязателен для продолжения отслеживания событий прокрутки.
  • Поддержка вертикальной и горизонтальной прокрутки.

Управление видимостью элементов при прокрутке

Компонент QScrollObserver позволяет отслеживать видимость элементов:

<q-scroll-observer @scroll="onScroll">
  <div id="animated-block">Контент для анимации</div>
</q-scroll-observer>
methods: {
  onScroll({ position, direction }) {
    if (position > 200) {
      // Запуск анимации или подгрузки
    }
  }
}

Параметры события:

  • position — текущая вертикальная позиция прокрутки.
  • direction — направление прокрутки (up или down).

Настройка производительности прокрутки

Для оптимизации при большом объёме элементов:

  • Использовать v-scroll с debounce.
  • Комбинировать QInfiniteScroll с виртуализацией через сторонние библиотеки.
  • Минимизировать тяжелые операции внутри обработчика события прокрутки.

Закрепление и плавная прокрутка элементов

Quasar поддерживает фиксацию элементов через position: sticky в сочетании с прокруткой. Для плавной навигации можно комбинировать QToolbar и $q.pageScrollTo:

<q-toolbar position="sticky">
  <q-btn @click="$q.pageScrollTo('#section1', 600)">Раздел 1</q-btn>
</q-toolbar>

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

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

Оглавление