VueUse

useVirtualList

Composable virtual list. It allows you to display a large list of items while only rendering visible ones on the screen.

Usage 

import { useVirtualList } from '@vueuse/core'

const { list, containerProps, wrapperProps } = useVirtualList(
  Array.from(Array(99999).keys()),
  {
    itemHeight: 22,
  },
)

<template>
  <div v-bind="containerProps" style="height: 300px">
    <div v-bind="wrapperProps">
      <div v-for="item in list" :key="item.index">
        Row: {{ item.data }}
      </div>
    </div>
  </div>
</template>

Component 

<UseVirtualList :list="list" :options="options" height="300px">
  <template #="props">
    <!-- you can get current item of list here -->
    Row {{ props.data }}
  </template>
</UseVirtualList>

Type Declarations 

export interface UseVirtualListOptions {
  /**
   * item height, accept a pixel value or a function that returns the height
   *
   * @default 0
   */
  itemHeight: number | ((index: number) => number)
  /**
   * the extra buffer items outside of the view area
   *
   * @default 5
   */
  overscan?: number
}
export declare function useVirtualList<T = any>(
  list: T[],
  options: UseVirtualListOptions
): {
  list: Ref<any>
  scrollTo: (index: number) => void
  containerProps: {
    ref: Ref<any>
    onScroll: () => void
    style: Partial<CSSStyleDeclaration>
  }
  wrapperProps: ComputedRef<{
    style: {
      width: string
      height: string
      marginTop: string
    }
  }>
}

Source

Source • Demo • Docs