How we can add some spaces at the top of the items while using scrollToIndex?.

[bipinrajbhar]

Hi, @tannerlinsley, @petersendidit , @piecyk , @mogelbrod , @oskarhane , @shastri9999.

I am using scrollToIndex Fn to scroll to a specific item. I am not aware of how i can give some offset value to avoid the item getting hidden behind the sticky header.

Thank you so much @tannerlinsley for such a great library.

[nassif7]

hey, I am having a very similar case, may I ask how to manage the virtual list parent height dynamically?
I have sticky header and sticky footer, and I might have some other content in the page.
then I am struggling a bit to set the virtual list parent height, It seems the only way is to set a value for the height.

[dantman]

You can use a measuring hook like the useMeasure hook in @react-hookz/web.
https://codesandbox.io/s/react-virtual-scrolltoindex-doesnt-work-with-sticky-headers-mrbhec?file=/src/main.jsx

[dantman]

I have the same issue, reported it as #265 since I have a demo of the issue.

My assumed quick solution was to add an offsetStart and offsetEnd to scrollToIndex.

Technically this could work, though it may not be ideal on its own. We probably want scrollToOffset to also handle this so that { align: 'center' } centers things in the center of the padded area instead of the center of the whole scroll area.

[dantman]

Maybe instead of offsetStart/End on the scroll functions we should have scrollPaddingStart/End that controls this behaviour. That way it's still backwards compatible, useVirtual behaves the same if you don't define them (padding pushes content inwards but doesn't stop scrollTo from showing stuff in the padding area.

The naming makes sense because this is basically what the scroll-padding-* properties do.

[dantman]

I've written a PR that implements this behavior #269.