# TbwScrollDetail

> _Since v2.2.0_

Detail payload for the `tbw-scroll` event.

Dispatched on the grid host whenever the vertical viewport scrolls
(rAF-batched — at most one per frame). Use to trigger pagination,
defer heavy cell content rendering, dismiss overlays, or sync a
scroll-tracking UI outside the grid.

For server-side pagination of large datasets, prefer
`ServerSidePlugin` which handles block fetching out of the box.

#### Example

```typescript
grid.addEventListener('tbw-scroll', (e) => {
  const { scrollTop, scrollHeight, clientHeight } = e.detail;
  if (scrollTop + clientHeight >= scrollHeight - 200) loadMore();
});
```

## Properties

| Property | Type | Description |
| -------- | ---- | ----------- |
| `scrollTop` | <code>number</code> | Current vertical scroll offset in pixels (faux scrollbar). |
| `scrollHeight` | <code>number</code> | Total scrollable height in pixels (faux scrollbar). |
| `clientHeight` | <code>number</code> | Visible viewport height in pixels (faux scrollbar). |
| `direction` | <code>vertical &#124; horizontal</code> | Axis that triggered this dispatch. Currently always `'vertical'`; `'horizontal'` is reserved for a future opt-in dispatch and is declared up-front so consumer narrowing remains source-compatible. |

## See Also

- [`DataGridEventMap`](/grid/api/core/interfaces/datagrideventmap.md) for all event types