Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add isScrollingResetDelay option to Virtualizer #719

Merged
merged 1 commit into from
Apr 29, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 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,34 @@ 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.

### `scrollDirection`

```tsx
scrollDirection: 'forward' | 'backward' | null
```

This option indicates the direction of scrolling, with possible values being 'forward' for scrolling downwards and 'backward' for scrolling upwards. The value is set to null when there is no active scrolling.

### `scrollOffset`

```tsx
scrollOffset: number
```

This option represents the current scroll position along the scrolling axis. It is measured in pixels from the starting point of the scrollable area.
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
Loading