Scrollbar

В библиотеке Element Plus компонент Scrollbar предоставляет расширенные возможности управления прокруткой содержимого. Он заменяет стандартные скроллбары браузера, обеспечивая кроссбраузерную совместимость, кастомизацию стилей и плавное взаимодействие с контентом. Компонент особенно полезен при работе с динамическими списками, таблицами и областями с фиксированной высотой или шириной.

Импорт и базовое использование

Для подключения Scrollbar необходимо импортировать компонент из библиотеки:

import { ElScrollbar } from 'element-plus';

Использование в шаблоне Vue выглядит следующим образом:

<el-scrollbar style="height: 300px; width: 400px;">
  <div v-for="item in 50" :key="item">
    Элемент {{ item }}
  </div>
</el-scrollbar>

Ключевые моменты:

  • style — задает размеры области прокрутки, без явного указания высоты или ширины скроллбар не будет отображаться.
  • Внутри компонента можно размещать любой контент, включая списки, таблицы, изображения или кастомные компоненты.

Свойства компонента

Scrollbar поддерживает несколько важных свойств для настройки поведения и внешнего вида:

Свойство Тип Описание
height String / Number Задает фиксированную высоту области прокрутки. Если не задано, используется высота контента.
max-height String / Number Ограничивает максимальную высоту области прокрутки.
wrap-style Object / String Пользовательский стиль для контейнера скроллбара.
wrap-class String CSS-класс для контейнера.
view-style Object / String Стиль для внутреннего содержимого, прокручиваемого блока.
view-class String CSS-класс для внутреннего блока.
noresize Boolean Отключает отслеживание изменений размера содержимого (оптимизация производительности при динамических данных).
tag String Тег HTML для внутреннего прокручиваемого блока (по умолчанию div).

События прокрутки

Scrollbar генерирует события, позволяющие отслеживать движение содержимого:

  • scroll — срабатывает при любой прокрутке. Передает объект события Event с доступом к scrollTop и scrollLeft.
  • scroll-bottom — срабатывает, когда пользователь достигает нижней границы области прокрутки. Полезно для реализации бесконечной загрузки данных.

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

<el-scrollbar
  style="height: 300px"
  @scroll="handleScroll"
  @scroll-bottom="loadMoreItems"
>
  <div v-for="item in items" :key="item.id">
    {{ item.name }}
  </div>
</el-scrollbar>

<script>
export default {
  data() {
    return { items: [] };
  },
  methods: {
    handleScroll(event) {
      console.log('Прокрутка', event.target.scrollTop);
    },
    loadMoreItems() {
      // Логика подгрузки новых данных
    }
  }
}
</script>

Настройка внешнего вида

Scrollbar поддерживает тонкую кастомизацию внешнего вида через CSS:

/* Стили для контейнера */
.el-scrollbar__wrap.custom-scroll {
  background-color: #f5f5f5;
}

/* Стили для ползунка */
.el-scrollbar__bar {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.el-scrollbar__bar:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
  • Ползунок (el-scrollbar__bar) может быть стилизован отдельно для горизонтальной и вертикальной прокрутки.
  • Внутренний блок (el-scrollbar__view) можно оформить с помощью view-class или view-style.

Вертикальная и горизонтальная прокрутка

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

<el-scrollbar style="width: 300px;">
  <div style="width: 600px;">
    Горизонтальный контент
  </div>
</el-scrollbar>
  • Вертикальный и горизонтальный скроллбары могут работать одновременно.
  • Контент автоматически подстраивается под размеры контейнера.

Оптимизация производительности

При работе с большими списками рекомендуется:

  • Использовать свойство noresize, если высота содержимого не изменяется динамически.
  • Ограничивать количество элементов в DOM через виртуализацию (virtual-list), так как большое количество элементов замедляет рендеринг.
  • Применять max-height вместо height для гибкого интерфейса.

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

Scrollbar часто используется внутри других компонентов Element Plus:

  • ElTable — для кастомной прокрутки таблиц с фиксированной высотой.
  • ElDialog — для прокручиваемых модальных окон.
  • ElCollapse — для прокрутки содержимого в разворачивающихся панелях.

Пример внутри таблицы:

<el-scrollbar style="height: 400px;">
  <el-table :data="tableData">
    <el-table-column prop="name" label="Имя" />
    <el-table-column prop="age" label="Возраст" />
  </el-table>
</el-scrollbar>
  • Использование собственного Scrollbar позволяет сохранять единый стиль интерфейса, независимый от платформы и браузера.

Ключевые преимущества

  • Кроссбраузерность — одинаковое поведение в Chrome, Firefox, Safari и Edge.
  • Плавная анимация прокрутки.
  • Кастомизация внешнего вида через CSS и свойства компонента.
  • События прокрутки позволяют реализовать динамическую подгрузку данных.
  • Гибкость размеров через height, max-height, wrap-style и view-style.

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

Оглавление