Всем привет, на этот раз хочу провести обзор инструмента 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.