ng-vscroll-box

ng-vscroll-box is a Angular virtual scroll for items with variable heights, especially chat like interfaces.

Features

• Items with variable heights, by default
• Dynamic prepend or append items

• Scroll to top or bottom
• Scroll to item
• Scroll to position

Live Demo with source

Usage

1. Install with peer dependencies

npm install ng-vscroll-box resize-observer-polyfill lodash.debounce --save

2. Update your app module

import { NgVscrollBoxModule } from 'ng-vscroll-box';
...

@NgModule({
  ...
  imports: [
    ...
    NgVscrollBoxModule,
    ],
  ...
})
export class AppModule { }

3. Use the ng-vscroll-box tag. Each item in items array must have unique key named id. This value is used internally for caching sizes.

<ng-vscroll-box #scrollRef
  [items]="items"
  >
  <div
    *ngFor="let item of scrollRef.viewPortItems"
    [vscrollItemId]="item.id"
    >
    {{item.name}}
  </div>
</ng-vscroll-box>

4. Specify height and/or width using CSS

ng-vscroll-box {
  height: 80vh;
  /* width: 500px; */
  /* border: 1px solid silver; */
}

Peer Dependencies

• resize-observer-polyfill 1.5.x - polyfill until all browsers support ResizeObserver
• lodash.debounce 4.x.x - for debounce function

Properties

• [items]: Array<any> required

  The array of objects passed to the virtual scroll. It's important that each array item is an object with a unique key named id or idProp described below.

• [idProp]: string optional, default value id

  Name of the unique key in every item in items. This will be used internally for tracking. The value of the unique key can be number or string.

• (changeEvent): ChangeEvent

  Emits viewPortItems which has to be looped to generate list components, startIndex and endIndex.

• (updateEvent): UpdateEvent

  Emits values atTop, atBottom, scrollTop, scrollHeight.

Methods

• scrollToTop()

  Scrolls to top

• scrollToBottom()

  Scrolls to bottom

• scrollToId(id: number | string)

  Scrolls to item. Pass the idProp value of the item.

• scrollToPosition(top: number)

  Scrolls to pixel position

   .-----------.        -            -                     -
   |           |        |            | contentTop*         |
   | .-------. |        | scrollTop  -  -                  |
   | |       | |        |               |                  |
 .-+-+-------+-+-.   -  -               |                  |
 | | |       | | |   |                  |                  |
 | | |       | | |   | height           | contentHeight*   | scrollHeight
 | | |       | | |   |                  |                  |
 `-+-+-------+-+-'   -                  |                  |
   | |       | |                        |                  |
   | `-------' |                        -                  |
   |           |                                           |
   |           |                                           |
   `-----------'                                           -

 * internal values

Angular

This library was generated with Angular CLI version 8.1.2.

Change log

License MIT