fix(virtual): patch unreliable scrollend event

[J-Sek]

Description

Context:

• initial items array size should be at least 50 (or more on taller screens or zoom out)
• items reduction should eliminate scrollbar to effectively trigger scroll (easiest to achieve by reducing array to as many items as fit on the screen)

Diagnosis leads me to a rather dumb patch - force call of scrollend handler when scroll was triggered shortly after items were changed.

Shortly = 0.3s
Debounce = 0.1s

I did not want to use nextTick not rAF, because delay between items change and scroll handler execution may be impacted by browser load (or device performance characteristics).

fixes #20566

Markup:

<template>
  <v-data-table-virtual
    :headers="headers"
    :items="items"
    height="500"
    item-value="name"
    fixed-header
  >
  </v-data-table-virtual>
  <div class="ma-5 d-flex">
    <v-switch v-model="less" color="primary" label="Less Boats" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        headers: [
          { title: 'Boat Type', align: 'start', key: 'name' },
          { title: 'Speed (knots)', align: 'start', key: 'speed' },
          { title: 'Length (m)', align: 'start', key: 'length' },
          { title: 'Price ($)', align: 'start', key: 'price' },
          { title: 'Year', align: 'start', key: 'year' },
        ],
        boats: Array.from({ length: 80 }).map((_, i) => ({
          name: `Speedster #${i}`,
          speed: 35,
          length: 22,
          price: 300000,
          year: 2021,
        })),
        less: false,
      }
    },
    computed: {
      items() {
        if (this.less) {
          return this.boats.slice(0, 3)
        }
        return this.boats
      },
    },
  }
</script>

[KaelWD]

This doesn't even need the lastItemsChange, just a timeout in case scrollend never fires for any reason. I've also made it a bit longer so we don't end up with two calls if the real scrollend does fire.