Append to window scroll

It is a pleasure writing an issue in such a great project!

I was wondering, if leaving the height and width properties on their own (https://codesandbox.io/s/empty-breeze-jzbry?file=/src/App.js:595-649) is the best option to make scrollable element of list snap to window scrollbar. It seems a little buggy. Do we have an option to make virtualized element snap its scrollbar to main browser scrollbar?

[vpcvdc]

My solution for true virtual concept in window scroll - sample live code

• window scroll (without virtual concept)

const parentRef = React.useRef(window.document.body);

const rowVirtualizer = useVirtual({
  size: 10000,
  parentRef,
  estimateSize: React.useCallback(() => 35, []),
  overscan: 5
});

• window scroll (with virtual concept)

const parentRef = React.useRef(window.document.body);

const rowVirtualizer = useVirtual({
  size: 10000,
  parentRef,
  estimateSize: React.useCallback(() => 35, []),
  overscan: 5
});

const { scrollToOffset } = rowVirtualizer;
React.useEffect(() => {
  const resizeHandler = () => (window.document.body.style.height = `${window.innerHeight}px`);
  const scrollHandler = () => scrollToOffset(window.scrollY);
  window.addEventListener("resize", resizeHandler);
  window.addEventListener("scroll", scrollHandler, { passive: true });
  window.document.body.style.height = `${window.innerHeight}px`;
  scrollToOffset(window.scrollY);
  return () => {
    window.removeEventListener("resize", resizeHandler);
    window.removeEventListener("scroll", scrollHandler, { passive: true });
  };
}, [scrollToOffset]);

@tannerlinsley Thank you for such a great library

[mogelbrod]

I currently use this wrapping hook, compatible with the current release (v2.2.5):

import React from 'react'
import { useVirtual } from 'react-virtual'

export function useVirtualWindow(options) {
  const sizeKey = options.horizontal ? 'width' : 'height'

  const virtualizedRef = options.parentRef
  const virtualizedBounds = React.useRef()

  const scrollListenerRef = React.useRef()
  // Mock the API surface currently used through parentRef
  const mockedParentRef = React.useRef({
    get scrollLeft() {
      return window.scrollX - virtualizedBounds.current.left
    },
    get scrollTop() {
      return window.scrollY - virtualizedBounds.current.top
    },
    getBoundingClientRect: () => ({
      width: window.innerWidth,
      height: window.innerHeight,
    }),
    addEventListener: (type, listener, ...args) => {
      // Only proxy 'scroll' event listeners
      if (type === 'scroll') {
        const proxiedListener = listener
        listener = scrollListenerRef.current = (originalEvent) => {
          // Some "scroll locking" implementations (such as for modals) work by
          // applying styling to the body. This optional offset will compensate
          // for that.
          const bodyOffset = parseInt(document.body.style.top || '0', 10)

          const target = {
            scrollLeft: window.scrollX - virtualizedBounds.current.left,
            scrollTop: window.scrollY - virtualizedBounds.current.top - bodyOffset,
          }
          proxiedListener({ target })
        }
        listener()
      }
      return document.addEventListener(type, listener, ...args)
    },
    removeEventListener: (type, listener, ...args) => {
      if (type === 'scroll') {
        listener = scrollListenerRef.current
      }
      return document.removeEventListener(type, listener, ...args)
    }
  })

  // Track dimensions of the virtualized container
  React.useLayoutEffect(() => {
    const onResize = () => {
      const rect = virtualizedRef.current.getBoundingClientRect()
      virtualizedBounds.current = {
        left: rect.left + window.scrollX,
        top: rect.top + window.scrollY,
      }
    }
    onResize()
    window.addEventListener('resize', onResize)
    return () => {
      window.removeEventListener('resize', onResize)
    }
  }, [virtualizedRef, sizeKey])

  return useVirtual({
    ...options,
    parentRef: mockedParentRef,
  })
}

Usage is just like the regular useVirtual() (provide the scrolled list as parentRef).

As you can see it has to mock the parentRef to intercept bounds checking and the scroll event. Ideally some variation of the version provided by @petersendidit above would avoid these ugly hacks, while not messing with the API surface too much for the sake of a single use case.