feat(scrollOffset): return scrollOffset from useVirtual

docs/src/pages/docs/api.md

@@ -14,6 +14,7 @@ const {
   totalSize,
   scrollToIndex,
   scrollToOffset,
+  scrollOffset,
 } = useVirtual({
   size,
   parentRef,
@@ -119,3 +120,7 @@ const {
     - `center` places the offset in the center of the visible scroll area
     - `end` places the offset at the bottom/right of the visible scroll area
     - `auto` brings the offset into the visible scroll area either at the start or end, depending on which is closer. If the offset is already in view, it is placed at the `top/left` of the visible scroll area.
+- `scrollOffset: number`
+  - The scroll offset of the virtualizer at the time of rendering.
+  - Can be used to implement scroll position dependent functionality, such as pagination UI.
+  - `useVirtual` causes the host component to re-render on every scroll event. This offset is returned so you can implement scroll offset dependent functionality without adding second onScroll event which would result in double rendering and tearing.

src/index.js

@@ -281,6 +281,7 @@ export function useVirtual({
     scrollToOffset,
     scrollToIndex,
     measure,
+    scrollOffset,
   }
 }
 

src/tests/index.test.js

@@ -24,6 +24,7 @@ function List({
 
   return (
     <>
+      <div data-testid="scrollOffset">{rowVirtualizer.scrollOffset}</div>
       <div
         ref={parentRef}
         style={{
@@ -135,4 +136,19 @@ describe('useVirtual list', () => {
     expect(screen.queryByText('Row 1')).toBeInTheDocument()
     expect(screen.queryByText('Row 2')).not.toBeInTheDocument()
   })
+  it('should update scrollOffset', async () => {
+    const onRef = virtualRow => el => {
+      if (el) {
+        jest.spyOn(el, 'offsetHeight', 'get').mockImplementation(() => 25)
+      }
+      virtualRow.measureRef(el)
+    }
+    render(<List {...props} onRef={onRef} />)
+
+    expect(screen.queryByTestId('scrollOffset')).toHaveTextContent(/^0$/)
+
+    fireEvent.scroll(parentRef.current, { target: { scrollTop: 100 } })
+
+    expect(screen.queryByTestId('scrollOffset')).toHaveTextContent(/^100$/)
+  })
 })

types/index.d.ts

@@ -52,12 +52,15 @@ export interface Options<T> {
   rangeExtractor?: (range: Range) => number[]
 }
 
-declare function useVirtual<T>(options: Options<T>): {
+declare function useVirtual<T>(
+  options: Options<T>
+): {
   virtualItems: VirtualItem[]
   totalSize: number
   scrollToOffset: (index: number, options?: ScrollToOffsetOptions) => void
   scrollToIndex: (index: number, options?: ScrollToIndexOptions) => void
   measure: () => void
+  scrollOffset: number
 }
 
 export { defaultRangeExtractor, useVirtual }