Виртуальные Scroll-контейнеры — Евгений Гребенников на vc.ru

Всем привет, на этот раз хочу провести обзор инструмента ng-virtual-scroll-view.

В предыдущей статье я делал обзор на универсальные виртуализированнные списки, которые "под капотом" использовали одноосевой виртуальный scroll-контейнер. Из проекта ng-virtual-list решил вырастить ещё один инструмент, двухосевой виртуальный scroll-контейнер ng-virtual-scroll-view. Инструмент также поддерживает версии Angular с 14 по 22.

С API и примерами использования можно ознакомиться в документации.

Пример использования виртуального scroll-контейнера

Думать над реализацией я приступил, когда проектировал библиотеку для создания виртуализированных списков ng-virtual-list, по причине весомых ограничений, которые накладывает нативная (браузерная) реализация scroll-контейнеров.

Основными преимуществами данного решения является:

Гибкость в управлении прокруткой. Можно настраивать пользовательские параметры для физики прокрутки. Указывать кастомную продолжительность анимации прокрутки и продолжительность анимации при "прилипании" к краям контейнера.
Захват и перемещение контента с физикой скольжения работает как на мобильных платформах, так и на PC.
Смешивание анимаций во время прокрутки. Т.е. другими словами, когда происходит анимация прокрутки, то можно обновить конечные позиции и анимация будет продолжаться, а не применяться заново.
Возможность указывать начальное и конечное смещение для полосы прокрутки.
Возможность создавать контейнеры с перекрытием полос прокрутки.
Возможность указывать грани к которым будет "прилипать" прокрутка при изменении размера контента.
Полноценная кастомизация полос прокрутки.
Поддержка "left-to-right" и "right-to-left" режима отображения.
Также как и в ng-virtual-list, в ng-virtual-scroll-view я поддержал эффект Motion Blur.

Для создания интерактивных кликабельных элементов внутри контентной части scroll-контейнера можно использовать обычные элементы button, применив к ним специальную директиву virtualClick:

<ng-virtual-scroll-view #scrollView1 class="scroll-view" direction="both"> <div class="scroll-view__content" [style.width.px]="3000" [style.height.px]="3000" [class.grabbing]="scrollView1.$grabbing | async"> <button virtualClick (onVirtualClick)="myVirtualClick($event)"> My button </button> </div> </ng-virtual-scroll-view>

@Component({ selector: 'my-scroll-view', imports: [CommonModule, NgVirtualScrollViewModule], templateUrl: './my-scroll-view.html', styleUrl: './my-scroll-view.scss' }) export class MyScrollViewComponent { ... }

Кастомизация полосы прокрутки осуществляется установкой пользовательского компонента в качестве шаблона:

<ng-virtual-scroll-view #scrollView1 class="scroll-view" direction="both" [scrollbarEnabled]="true" [scrollbarThickness]="6" [scrollbarThumbRenderer]="customScrollBarThumb" [scrollbarThumbParams]="customScrollBarThumbParams"> <div class="scroll-view__content" [style.width.px]="3000" [style.height.px]="3000" [class.grabbing]="scrollView1.$grabbing | async"></div> </ng-virtual-scroll-view> <ng-template #customScrollBarThumb let-api="api" let-width="width" let-height="height" let-fillPositions="fillPositions" let-params="params"> <custom-scrollbar [api]="api" [width]="width" [height]="height" [fillPositions]="fillPositions" [params]="params"></custom-scrollbar> </ng-template>

@Component({ selector: 'my-scroll-view', imports: [CommonModule, NgVirtualScrollViewModule, CustomScrollbarModule], templateUrl: './my-scroll-view.html', styleUrl: './my-scroll-view.scss' }) export class MyScrollViewComponent { ... }

Демонстрация работы компонента: Demo

Репозиторий: Github

P.S.: Если понравился проект, ставьте звездочку ⭐ng-virtual-scroll-view.