Skip to content

Commit

Permalink
fix: add useScrollendEvent option (#875)
Browse files Browse the repository at this point in the history
  • Loading branch information
hshoja authored Nov 7, 2024
1 parent 3202bd0 commit 375cd83
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 22 deletions.
10 changes: 10 additions & 0 deletions docs/api/virtualizer.md
Original file line number Diff line number Diff line change
Expand Up @@ -240,6 +240,16 @@ This option allows you to specify the duration to wait after the last scroll eve

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.

### `useScrollendEvent`

```tsx
useScrollendEvent: boolean
```

This option allows you to switch to use debounced fallback to reset the isScrolling instance property after `isScrollingResetDelay` milliseconds. The default value is `true`.

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.

### `isRtl`

```tsx
Expand Down
49 changes: 27 additions & 22 deletions packages/virtual-core/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -130,9 +130,11 @@ export const observeWindowRect = (
const supportsScrollend =
typeof window == 'undefined' ? true : 'onscrollend' in window

type ObserveOffsetCallBack = (offset: number, isScrolling: boolean) => void

export const observeElementOffset = <T extends Element>(
instance: Virtualizer<T, any>,
cb: (offset: number, isScrolling: boolean) => void,
cb: ObserveOffsetCallBack,
) => {
const element = instance.scrollElement
if (!element) {
Expand All @@ -144,15 +146,16 @@ export const observeElementOffset = <T extends Element>(
}

let offset = 0
const fallback = supportsScrollend
? () => undefined
: debounce(
targetWindow,
() => {
cb(offset, false)
},
instance.options.isScrollingResetDelay,
)
const fallback =
instance.options.useScrollendEvent && supportsScrollend
? () => undefined
: debounce(
targetWindow,
() => {
cb(offset, false)
},
instance.options.isScrollingResetDelay,
)

const createHandler = (isScrolling: boolean) => () => {
const { horizontal, isRtl } = instance.options
Expand All @@ -177,7 +180,7 @@ export const observeElementOffset = <T extends Element>(

export const observeWindowOffset = (
instance: Virtualizer<Window, any>,
cb: (offset: number, isScrolling: boolean) => void,
cb: ObserveOffsetCallBack,
) => {
const element = instance.scrollElement
if (!element) {
Expand All @@ -189,15 +192,16 @@ export const observeWindowOffset = (
}

let offset = 0
const fallback = supportsScrollend
? () => undefined
: debounce(
targetWindow,
() => {
cb(offset, false)
},
instance.options.isScrollingResetDelay,
)
const fallback =
instance.options.useScrollendEvent && supportsScrollend
? () => undefined
: debounce(
targetWindow,
() => {
cb(offset, false)
},
instance.options.isScrollingResetDelay,
)

const createHandler = (isScrolling: boolean) => () => {
offset = element[instance.options.horizontal ? 'scrollX' : 'scrollY']
Expand Down Expand Up @@ -291,9 +295,8 @@ export interface VirtualizerOptions<
) => void | (() => void)
observeElementOffset: (
instance: Virtualizer<TScrollElement, TItemElement>,
cb: (offset: number, isScrolling: boolean) => void,
cb: ObserveOffsetCallBack,
) => void | (() => void)

// Optional
debug?: boolean
initialRect?: Rect
Expand Down Expand Up @@ -321,6 +324,7 @@ export interface VirtualizerOptions<
initialMeasurementsCache?: Array<VirtualItem>
lanes?: number
isScrollingResetDelay?: number
useScrollendEvent?: boolean
enabled?: boolean
isRtl?: boolean
}
Expand Down Expand Up @@ -412,6 +416,7 @@ export class Virtualizer<
isScrollingResetDelay: 150,
enabled: true,
isRtl: false,
useScrollendEvent: true,
...opts,
}
}
Expand Down

0 comments on commit 375cd83

Please sign in to comment.