Skip to content

Commit 907ae66

Browse files
authored
docs: extend scrollMargin description (#862)
1 parent c13a6a1 commit 907ae66

File tree

1 file changed

+7
-1
lines changed

1 file changed

+7
-1
lines changed

docs/api/virtualizer.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,13 @@ This optional function is called when the virtualizer needs to dynamically measu
206206
scrollMargin?: number
207207
```
208208

209-
With this option, you can specify where the scroll offset should originate. Typically, this value represents the space between the beginning of the scrolling element and the start of the list. This is especially useful in common scenarios such as when you have a header preceding a window virtualizer or when multiple virtualizers are utilized within a single scrolling element.
209+
With this option, you can specify where the scroll offset should originate. Typically, this value represents the space between the beginning of the scrolling element and the start of the list. This is especially useful in common scenarios such as when you have a header preceding a window virtualizer or when multiple virtualizers are utilized within a single scrolling element. If you are using absolute positioning of elements, you should take into account the `scrollMargin` in your CSS transform:
210+
```tsx
211+
transform: `translateY(${
212+
virtualRow.start - rowVirtualizer.options.scrollMargin
213+
}px)`
214+
```
215+
To dynamically measure value for `scrollMargin` you can use `getBoundingClientRect()` or ResizeObserver. This is helpful in scenarios when items above your virtual list might change their height.
210216

211217
### `gap`
212218

0 commit comments

Comments
 (0)