Виртуальные Scroll-контейнеры

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

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

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

Думать над реализацией я приступил, когда проектировал библиотеку для создания виртуализированных списков 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.