# Virtual Scroll

> Fixed-size virtual scroll viewport. Thin wrapper around CDK's `cdk-virtual-scroll-viewport` with ngwr theming + sensible buffer defaults. Renders only the rows actually on screen, so a 100k-row list costs the same as a 30-row list.

Source: https://ngwr.dev/reference/components/virtual-scroll  
Kind: Component

## Import

```angular-ts
import { WrVirtualScroll } from 'ngwr/virtual-scroll';
```

## Playground

```html
<wr-virtual-scroll
  [items]="rows"
  [itemSize]="32"
  [height]="320"
>
  <ng-template let-row let-i="index">
    <div>{{ i + 1 }}. {{ row.label }}</div>
  </ng-template>
</wr-virtual-scroll>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `items`required | Items to render. The same array reference triggers no re-layout. | `readonly T[]` | — |
| `itemSize` | Per-row pixel height. All rows must share this height. | `number` | `32` |
| `height` | Viewport height — number = px, or any CSS length string. | `number \| string` | `256` |
| `minBufferPx` | Pixels of rendered content kept above + below the viewport. | `number` | `itemSize * 4` |
| `maxBufferPx` | Maximum buffered pixels before recycling rows. | `number` | `itemSize * 8` |
| `trackBy` | `trackBy` for the inner `*cdkVirtualFor`. | `TrackByFunction<T>` | `identity` |
| `scrollToIndex(i, behavior?)` | Programmatically scroll an index into view. | `(i: number, b?: ScrollBehavior) => void` | `—` |
| `scrollToOffset(px, behavior?)` | Scroll to a pixel offset. | `(px: number, b?: ScrollBehavior) => void` | `—` |
| `checkViewportSize()` | Force a viewport size recheck (after host resize outside ResizeObserver). | `() => void` | `—` |