Adding content in the "before" slot impacts the buffer size

[Simon-JB]

Use case
My virtual scroller contains some kind of music sheet that scrolls from top to bottom, with a scroll animation tied to a timer and the "current notes" being targeted to the middle of the screen. To achieve this, I add an empty div with a height of 50vh in the "before" slot so that the last item of the list reaches the middle of the screen when the scrolling ends.

The Problem
The buffer value seems to be affected by the size of the "before" div, which makes no sense because the div is part of the list and not fixed on screen. If I remove this 50vh div, a buffer value of 200px is enough to fill the virtual scroller without gaps. I I add the div and leave the buffer value at 200px, my items start to show up at the middle of the screen with a big gap at the top.
I have to double or triple the buffer value to account for his empty div, which has a big impact on performance.

Shouldn't the buffer area be independant from what is in the before and after slots ?

I can try to set up a quick codepen if needed to reproduce the problem.

[Simon-JB]

I modified an existing codesandbox to show what I mean.
It seems the problem also lies with the fact that the wrapper has a fixed height + overflow:hidden (because obviously I want the recyclescroller itself to be scrollable and not the div around it)

https://codesandbox.io/s/bug-with-before-slot-fg7lq

As you can see when you scroll, there is a "blank" area at the top of the div due to the buffer not covering up this part of the screen.
I you go and remove the div in the before slot, this area disappears.
<template slot="before"> <div style="background-color:grey;height:50vh;width:100%;"> <div :key="header" class="th" v-for="header in headers">{{ header }}</div> </div> </template>

[golinka]

I have the same issue