fix(VVirtualScroll): trim leading items when appending to bottom

fixes #20959

Author: J-Sek

packages/vuetify/src/components/VVirtualScroll/__tests__/VVirtualScroll.spec.browser.tsx

@@ -55,6 +55,37 @@ describe('VVirtualScroll', () => {
     expect(paddingBottom).toBeLessThan(800)
   })
 
+  it('removes previous items when appending while pinned to the bottom', async () => {
+    const items = ref(createRange(50))
+
+    render(() => (
+      <VVirtualScroll height="400" items={ items.value } itemHeight="24">
+        {{
+          default: ({ index }) => (
+            <div style={{ height: '24px' }}>{ index }</div>
+          ),
+        }}
+      </VVirtualScroll>
+    ))
+
+    const root = screen.getByCSS('.v-virtual-scroll')
+
+    await waitIdle()
+    root.scrollTop = root.scrollHeight
+    await waitIdle()
+
+    // simulate a log view adding 1 line at a time
+    for (let i = 0; i < 50; i++) {
+      items.value = [...items.value, items.value.length]
+      await waitIdle()
+      root.scrollTop = root.scrollHeight
+      await waitIdle()
+    }
+
+    // The window must slide
+    expect(screen.getAllByCSS('.v-virtual-scroll__item').length).toBeLessThan(50)
+  })
+
   it('reuses the same elements', async () => {
     const items = createRange(1000)
 

packages/vuetify/src/composables/virtual.ts

@@ -227,7 +227,10 @@ export function useVirtual <T> (props: VirtualProps, items: Ref<readonly T[]>) {
       } else {
         // Only update the side that's reached its limit if there's still buffer left
         if (start <= 0) first.value = start
-        if (end >= items.value.length) last.value = end
+        if (end >= items.value.length) {
+          last.value = end
+          first.value = start
+        }
       }
     }