Vue

by kabanoki

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-virtual-scroller.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-virtual-scroller.min.js"></script>
<div id="app">
  <div id="box">
    <recycle-scroller
      class="scroller"
      :items="list"
      :item-size="32"
      key-field="no"
      v-slot="{ item }"
    >
      <div class="user">
        <h3>{{ item.title }}</h3>
      </div>
    </recycle-scroller>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-virtual-scroller.min.js"></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

#box {
  height: 300px;
  width: 50%;
  margin:auto;
  border: 1px solid #000;
}

.scroller {
  height: 100%;
}

.user {
  height: 32%;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dcdcdc;
}

Vue

let list = [];

for(let i=0; i<10000; i++)
{
  list.push({
    no: i,
    title: 'title-' + i,
  });
}

Vue.use(VueVirtualScroller);
let app = new Vue({
  el: '#app',
  data: {
    list: list
  }
});