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

820

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

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

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

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

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

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

Гибкость в управлении прокруткой. Можно настраивать пользовательские параметры для физики прокрутки. Указывать кастомную продолжительность анимации прокрутки и продолжительность анимации при "прилипании" к краям контейнера.
Захват и перемещение контента с физикой скольжения работает как на мобильных платформах, так и на PC.
Смешивание анимаций во время прокрутки. Т.е. другими словами, когда происходит анимация прокрутки, то можно обновить конечные позиции и анимация будет продолжаться, а не применяться заново.
Возможность указывать начальное и конечное смещение для полосы прокрутки.
Разместите
тендер бесплатно

Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.

Заполнить заявку 13691 тендер
проведено за восемь лет работы нашего сайта.

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