QScrollArea настраиваемый скролл

QScrollArea — это компонент библиотеки Quasar Framework, предназначенный для создания области с прокручиваемым контентом. Он обеспечивает гибкую и кроссбраузерную прокрутку, а также возможность кастомизации внешнего вида скроллбаров. QScrollArea особенно полезен для интерфейсов с ограниченной областью отображения, где содержимое превышает доступное пространство.

Основные возможности:

  • Вертикальная и горизонтальная прокрутка.
  • Поддержка перетаскивания скролла мышью или сенсорным экраном.
  • Возможность стилизовать скроллбары с помощью CSS.
  • Управление видимостью скроллбаров (авто, всегда, никогда).

Основная структура компонента

<template>
  <q-scroll-area style="height: 300px;">
    <div class="content">
      <p>Длинный контент...</p>
    </div>
  </q-scroll-area>
</template>
  • style="height: 300px;" — обязательный параметр, задающий высоту области. Без него прокрутка не будет активирована.
  • Внутренний контейнер <div class="content"> содержит контент, который необходимо прокручивать.
  • QScrollArea автоматически добавляет прокрутку, когда контент превышает размеры контейнера.

Настройка видимости скроллбаров

Свойство scrollbar определяет поведение скроллбаров:

  • auto — прокрутка появляется только при необходимости.
  • always — скроллбар всегда видим.
  • never — скроллбар скрыт, прокрутка возможна с помощью колесика мыши или жестов.

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

<q-scroll-area scrollbar="always" style="height: 400px;">
  <div class="content">
    <p>Большой блок контента...</p>
  </div>
</q-scroll-area>

Горизонтальная и вертикальная прокрутка

По умолчанию QScrollArea поддерживает обе оси. Для ограничения прокрутки можно использовать свойства horizontal и vertical:

<q-scroll-area vertical>
  <div style="width: 600px; height: 1200px;">
    <p>Контент с вертикальной прокруткой</p>
  </div>
</q-scroll-area>
  • vertical — включает только вертикальную прокрутку.
  • horizontal — включает только горизонтальную прокрутку.
  • Совместное использование обоих свойств позволяет ограничивать прокрутку по одной оси.

Стилизация скроллбаров

QScrollArea предоставляет возможность полной кастомизации скроллбаров через слоты thumb и track.

Пример изменения цвета и формы скроллбара:

<q-scroll-area style="height: 300px;">
  <template v-slot:thumb>
    <div class="custom-thumb"></div>
  </template>
  <template v-slot:track>
    <div class="custom-track"></div>
  </template>
  <div class="content">
    <p>Длинный контент...</p>
  </div>
</q-scroll-area>

CSS:

.custom-thumb {
  background-color: #42a5f5;
  border-radius: 6px;
}

.custom-track {
  background-color: #e0e0e0;
  border-radius: 6px;
}

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

QScrollArea позволяет программно управлять положением скролла с помощью методов setScrollPosition, getScrollPosition и событий @scroll:

<q-scroll-area ref="scrollArea" style="height: 300px;">
  <div class="content">
    <p>Контент для прокрутки</p>
  </div>
</q-scroll-area>

<script>
export default {
  methods: {
    scrollToTop() {
      this.$refs.scrollArea.setScrollPosition({ top: 0, left: 0 });
    },
    getCurrentScroll() {
      const pos = this.$refs.scrollArea.getScrollPosition();
      console.log(pos);
    }
  }
}
</script>
  • setScrollPosition({ top, left }) — устанавливает положение прокрутки.
  • getScrollPosition() — возвращает текущее положение в формате { top, left }.
  • Событие @scroll позволяет отслеживать движение скролла для динамических эффектов или загрузки данных.

Интеграция с динамическим контентом

QScrollArea корректно работает с контентом, который динамически изменяет размеры, например, списками с виртуальной прокруткой. Для обновления скроллбара после изменения контента используется метод update:

this.$refs.scrollArea.update();

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

Лучшие практики

  • Всегда задавать фиксированные размеры контейнера для активации скролла.
  • Использовать слоты thumb и track для унификации стиля интерфейса с остальными компонентами.
  • Для больших списков предпочтительно сочетать QScrollArea с виртуальными списками (QVirtualScroll) для оптимизации производительности.
  • Программное управление скроллом удобно для реализации “вернуться к началу” или автоматической прокрутки к определённому элементу.

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

Оглавление