Static(not virtualized) items in scroll container placed before actual virtualized list

[Wordllban]

Hi everyone,
I'm trying to integrate virtualized dynamic grid into my project and I faced one issue which I don't know how to fix. According to my designs, I have couple static elements inside scrollable container, they are placed before actual virtualized list. So, this leades to the problem, when we scroll container, virtualized items starts dissapearing even they are still visible on the screen.
I tried different approaches, such as using some scroll padding/margings, but it didn't help or even broke the layout more. May I missed something or you guys have any solutions on this? Thank you in advance

I have forked example from documentation and reproduced the problem I have, so you can have a look how it works
To reproduce: Just scroll container a bit to see items from virtualized list, then scroll a bit more and you will items dissapearing even they should be visible on screen.
See 75-77 lines in main.tsx, https://stackblitz.com/edit/tanstack-virtual-cxltrd?file=src%2Fmain.tsx

If this is an issue, I can raise it and will try to prepare pull request, as I anyway need it for my job

[Wordllban]

Found a workaround with custom observeElementOffset function

const observeElementOffset = (
  instance: Virtualizer<HTMLDivElement, Element>,
  cb: (offset: number, isScrolling: boolean) => void,
  startOffset: number = 0 // our needed offset
): (() => void) | undefined => {
  const element = instance.scrollElement;
  if (!element) {
    return;
  }
  const { targetWindow } = instance;
  if (!targetWindow) {
    return;
  }

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

  const createHandler = (isScrolling: boolean) => () => {
    const { horizontal, isRtl } = instance.options;
    offset = horizontal
      ? element.scrollLeft * ((isRtl && -1) || 1)
      : element.scrollTop - startOffset; // calculate list offset with our offset
    
    fallback();
    cb(offset, isScrolling);
  };

  const handler = createHandler(true);
  const endHandler = createHandler(false);
  endHandler();

  element.addEventListener('scroll', handler, addEventListenerOptions);
  element.addEventListener('scrollend', endHandler, addEventListenerOptions);

  /* eslint-disable-next-line consistent-return */
  return (): void => {
    element.removeEventListener('scroll', handler);
    element.removeEventListener('scrollend', endHandler);
  };
};

You can use it like so:

  const rowVirtualizer = useVirtualizer({
    ...virtualizerOptions,
    observeElementOffset: useCallback(
      (
        instance: Virtualizer<HTMLDivElement, Element>,
        cb: (offset: number, isScrolling: boolean) => void
      ) => observeElementOffset(instance, cb, startOffset),
      [startOffset]
    ),
  });

[piecyk]

As mention in #856 (comment) here we can use scrollMargin, this value informs where the list starts.