Virtual Scroll Containers

Hello everyone!

This time, I’d like to review the ng-virtual-scroll-view tool. In a previous article, I reviewed universal virtualized lists that utilized a single-axis virtual scroll container “under the hood.” I decided to develop a new tool based on the ng-virtual-list project: ng-virtual-scroll-view, a two-axis virtual scroll container. This tool supports Angular versions 14 through 22. You can find the API details and usage examples in the documentation.

I began considering the implementation while designing ng-virtual-list—a library for creating virtualized lists—due to the significant limitations imposed by the native (browser) implementation of scroll containers. The main advantages of this solution are:

•Flexible scroll control. You can configure custom parameters for scroll physics, including the duration of the scrolling animation and the duration of the animation when snapping to container edges.

•Content dragging with momentum-based physics works on both mobile platforms and PC.

•Animation blending during scrolling: if the target position is updated while a scroll animation is in progress, the animation continues smoothly rather than restarting from scratch.

•Ability to specify start and end offsets for the scrollbar.

•Ability to create containers with overlapping scrollbars.

•Ability to specify the edges to which the scroll position “sticks” when content size changes.

•Full scrollbar customization.

•Support for left-to-right and right-to-left display modes.

•Just like in ng-virtual-list, I have implemented the motion blur effect in ng-virtual-scroll-view.

To create interactive, clickable elements within the content area of a scroll container, you can use standard button elements by applying the special virtualClick directive to them:

<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 {
  ...
}

Scrollbar customization is achieved by setting a custom component as the template:

<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 { 
  ...
}

Component demo: Demo

Repository: GitHub

P.S.: If you like the project, please star ⭐ ng-virtual-scroll-view.