Skip to content

Commit

Permalink
feat: add isScrollingResetDelay option to Virtualizer
Browse files Browse the repository at this point in the history
  • Loading branch information
piecyk committed Apr 29, 2024
1 parent ae70aba commit ecd788b
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 2 deletions.
20 changes: 20 additions & 0 deletions docs/api/virtualizer.md
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,16 @@ lanes: number

The number of lanes the list is divided into (aka columns for vertical lists and rows for horizontal lists).

### `isScrollingResetDelay`

```tsx
isScrollingResetDelay: number
```

This option allows you to specify the duration to wait after the last scroll event before resetting the isScrolling instance property. The default value is 150 milliseconds.

The implementation of this option is driven by the need for a reliable mechanism to handle scrolling behavior across different browsers. Until all browsers uniformly support the scrollEnd event.

## Virtualizer Instance

The following properties and methods are available on the virtualizer instance:
Expand Down Expand Up @@ -320,8 +330,18 @@ scrollRect: Rect
Current `Rect` of the scroll element.
### `shouldAdjustScrollPositionOnItemSizeChange`
```tsx
shouldAdjustScrollPositionOnItemSizeChange: undefined | ((item: VirtualItem, delta: number, instance: Virtualizer<TScrollElement, TItemElement>) => boolean)
```
The shouldAdjustScrollPositionOnItemSizeChange method enables fine-grained control over the adjustment of scroll position when the size of dynamically rendered items differs from the estimated size. When jumping in the middle of the list and scrolling backward new elements may have a different size than the initially estimated size. This discrepancy can cause subsequent items to shift, potentially disrupting the user's scrolling experience, particularly when navigating backward through the list.
### `isScrolling`
```tsx
isScrolling: boolean
```
Boolean flag indicating if list is currently being scrolled
6 changes: 4 additions & 2 deletions packages/virtual-core/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ export const observeElementOffset = <T extends Element>(
? () => undefined
: debounce(() => {
cb(offset, false)
}, 150)
}, instance.options.isScrollingResetDelay)

const createHandler = (isScrolling: boolean) => () => {
offset = element[instance.options.horizontal ? 'scrollLeft' : 'scrollTop']
Expand Down Expand Up @@ -174,7 +174,7 @@ export const observeWindowOffset = (
? () => undefined
: debounce(() => {
cb(offset, false)
}, 150)
}, instance.options.isScrollingResetDelay)

const createHandler = (isScrolling: boolean) => () => {
offset = element[instance.options.horizontal ? 'scrollX' : 'scrollY']
Expand Down Expand Up @@ -297,6 +297,7 @@ export interface VirtualizerOptions<
indexAttribute?: string
initialMeasurementsCache?: VirtualItem[]
lanes?: number
isScrollingResetDelay?: number
}

export class Virtualizer<
Expand Down Expand Up @@ -388,6 +389,7 @@ export class Virtualizer<
indexAttribute: 'data-index',
initialMeasurementsCache: [],
lanes: 1,
isScrollingResetDelay: 150,
...opts,
}
}
Expand Down

0 comments on commit ecd788b

Please sign in to comment.