Trying to use Virtual Scroller in Vue 3 But the items are buffering

Question

I need to display a large number of data but I can't make the virtual scroller work

  <RecycleScroller
class="scroller"
    page-mode
    :items="store.clinicData.value[store.activeTabKey.value]"
    v-slot="{ item }"
    item-height="42"
    :key-field="'hsId'"
    :item-size="25"

>
    <div class="user">
        <p>{{ item.name }}</p>
        <p>{{ item.hsId }}</p>
    </div>
</RecycleScroller>


<script>
import { RecycleScroller } from "vue-virtual-scroller";
</script>


    <style>
.scroller {
  height: 100%;
}

.user {
  height: 32%;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
</style>

The problem is that the items are buffering and hitting into each other,how can i fix this? And I get these errors: 1.Uncaught Error: Rendered items limit reached 2.It seems the scroller element isn't scrolling, so it tries to render all the items at once. Scroller: <div data-v-b4e148ca class=​"vue-recycle-scroller ready direction-vertical scroller">​…​​ 3.Make sure the scroller has a fixed height (or width) and 'overflow-y' (or 'overflow-x') set to 'auto' so it can scroll correctly and only render the items visible in the scroll viewport.

Answer 1

Add import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' to fixed it.