Vue virtual scrolling/virtual list simple implementation example

<template>
  <div class="container">
    <virtual-list :data="data"/>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import VirtualList from './components/';

const data = reactive((() => {
  const arr = [];
  for (let i = 0; i < 1000000; i++) arr[i] = i;
  return arr;
})());
</script>

<style scoped>
.container {
  width: 400px;
  height: 400px;
}
</style>

<template>
  <div
    class="view"
    :ref="el => viewRef = el"
    @scroll="handleScroll"
  >
    <div
      class="phantom"
      :style="{ height: `${itemSize * }px` }"
    >
    </div>
    <div
      class="list"
      :style="{ transform: `translateY(${translateLen}px)` }"
    >
      <div
        v-for="item in visibleList"
        :style="{ height: `${itemSize}px` }"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';

const props = defineProps({
  data: {
    type: Array,
    default: [],
  },
  itemSize: {
    type: Number,
    default: 32,
  }
})

const translateLen = ref(0);

const viewRef = ref(null);

const start = ref(0);
const visibleCount = computed(() => ((?.clientHeight ?? 0) / ));
const visibleList = computed(() => (,  + ));

const handleScroll = () => {
  const scrollTop = ;
   = (scrollTop / );

   = scrollTop - (scrollTop % );
}

</script>

<style scoped>
.view {
  position: relative;
  height: 100%;
  overflow: auto;
}

.phantom {
  position: absolute;
  width: 100%;
}

.list {
  position: absolute;
}
</style>