When content size inside the before slot changes, virtual scroller breaks

[alejandroiglesias]

The size of the before slot is not being watched for changes and the virtual scroller breaks whenever such content changes. You can see the issue on this CodeSandbox: https://codesandbox.io/embed/vue-virtual-scroller-issue-x22rm

Steps to reproduce:

1. Open the CodeSandbox.
2. Try to scroll in the demo, everything will work as expected.
3. Click the red button labeled "Click to break" at the top of the page.
4. Scroll the page again. The items in the list will disappear before intended.

The expected would be that if the before slot changes, the calculations that vue-virtual-scroller does are also updated. In theory, it can be accomplished by using mutation observers on the before and after slots.

[carueda]

AFAICT The following misbehavior seems closely related so didn't want to enter a separate ticket:

The after slot is also not properly handled apparently depending on whether the list of items exceed the visible region.

Steps to reproduce

• open the same sandbox above (sorry for not creating a simplified one for this particular misbehavior)
• in DynamicScrollerDemo.vue add the following right after the main </template>

      <template #after>
        <div class="notice">AFTER</div>
      </template>

• adjust the number of items to generate in line 46.

• set a small number, say 3, you'll see the after content as expected:

• but now, set some larger number to force more items than can fit in the view, say, 20, scroll all the way down to see the end of the list .... the AFTER is not displayed anymore.

[Livijn]

I am having a similar problem. I am creating a "pull to refresh" using the before slot where the text change from "Pull to refresh" to "Release to refresh" after X amount of scrollTop. When the text changes, the scroll breaks.

[sisou]

I am experiencing the exact same problem as in the original report when inserting a dynamic height #before slot.

@alejandroiglesias Do you know if we can trigger a recalculation manually in the component, or do you know where to change the code so this works?

[sisou]

I believe the fix needs to add to the scroll data around here: https://github.com/Akryum/vue-virtual-scroller/blob/ae5c2d4ced98b93f6d1cf1d153b5785b8e432e5d/src/components/RecycleScroller.vue#L495-L498 It needs to subtract the height of the #before slot from the start, and add the height of the #after slot to the end. I'm planning to try that out later, what do you think?

[sisou]

I have found a solution for the RecycleScroller here: https://github.com/sisou/vue-virtual-scroller/commit/e08e4979300080948fdeff84a5cf6b9152acaf79#diff-c68ef9686a54e5636b465e0ff53027ae

Note: It does not yet react directly to slot changes. It only recalculates the scroll offset when the list is scrolled or the list is at the top or bottom.