Integration

The scrollViewport directive allows you to set use custom viewport element in your template.

Basic usage

<ng-scrollbar>
  <div scrollViewport class="custom-viewport">
    <div class="content-wrapper">
       <!-- content -->
    </div>
  </div>
</ng-scrollbar>

NOTE: scrollViewport directive must be used on the direct child of <ng-scrollbar>

NOTE: When using scrollViewport directive on an element, It is recommended that the viewport element has one and only once child element that acts as a content wrapper (like .content-wrapper in the above example), this content wrapper is needed if you are using the ResizeSensor which observes content changes and updates the UI accordingly.

Integrate with CDK VirtualScroll.

<ng-scrollbar>
  <cdk-virtual-scroll-viewport itemSize="50" scrollViewPort>
    <div *cdkVirtualFor="let item of items">{{item}}</div>
  </cdk-virtual-scroll-viewport>
</ng-scrollbar>

Integrate with ngx-infinite-scroll.

<ng-scrollbar>
  <div infiniteScroll [scrollWindow]="false" scrollViewport>
    <mat-list>
      <mat-list-item class="example-item" *ngFor="let i of array">
        {{ i }}
      </mat-list-item>
    </mat-list>
  </div>
</ng-scrollbar>