Non-invisible headers support?

[conor888]

I've been loving using this package in my project! It fixes a lot of problems for me, but one thing I'm still seeking is the ability to have the entire page scroll rather than just the div with the list items.

In my project, I have a page header about 400-500px tall before the list items. I tried putting this in the <div slot="header"> slot in the Virtual List, and it works exactly how I'd like, except it throws the math off for calculating which items are currently in view. You can see this in the example I've modified here, where I've forced the "Hacker News" header to be 500px tall: https://svelte.dev/playground/8a44928ad59b4ae590d705bc0339f901?version=5.5.2

As soon as you start scrolling, items from the top of the list start disappearing even though they're in view.

I saw in #15 you mentioned the header/footer elements were designed to be used with invisible elements, but would it even be possible to add in this functionality for regular elements as well? Something like a headerHeight prop that you could bind to the header's container div with bind:offsetHeight = {headerHeight} etc. Then the computation for what elements are currently in view would take that value into account.

I think this would be a super useful feature for making more complex pages still feel like they're fully scrolling!