使用的組件庫是：https://github.com/Akryum/vue-virtual-scroller?

官方文檔：vue-virtual-scroller

安裝依賴

npm install --save vue-virtual-scroller@nextpnpm install --save vue-virtual-scroller@nextyarn add vue-virtual-scroller@next

組件導入

在main.ts中導入組件，這個依賴庫支持RecycleScroller，DynamicScroller，DynamicScrollerItem三個組件，可以全量導入，也可以部分導入。這三個組件區別是滾動每一項高度是固定的還是動態的，Recycle就是固定的高度，Dynamic是動態的，動態的話，必須要包含DynamicScrollerItem。

import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import VirtualScroller from 'vue-virtual-scroller'app.use(VirtualScroller)

使用試試

使用固定高度的RecycleScroller組件：

<template><RecycleScrollerclass="scroller":items="list":item-size="32"key-field="id"v-slot="{ item }"><div class="user">{{ item.name }}</div></RecycleScroller>
</template><script>
export default {props: {list: Array,},
}
</script><style scoped>
.scroller {height: 100%;
}.user {height: 32%;padding: 0 12px;display: flex;align-items: center;
}
</style>

使用動態高度的DynamicScroller組件：

注意事項：要結合DynamicScrollerItem一起使用，并且要加上active屬性才可以，不然會有警告。

<DynamicScroller:items="messageList":min-item-size="32"class="liveMeg"id="liveMsg"ref="liveMsg"v-if="messageList.length"><template v-slot="{ item, active }"><DynamicScrollerItem:item="item":active="active"class="msgBox":size-dependencies="[item.name, item.msg]":data-index="item.id"><div class="content"><span class="name">{{ item.name }}：</span><span class="msg">{{ item.msg }}</span></div></DynamicScrollerItem></template></DynamicScroller>css樣式：
.liveMeg {flex: 1;margin-left: 10px;background-color: #252632;border-radius: 10px;box-shadow: 0 0 10px 2px gray;scrollbar-color: #363741 transparent;scrollbar-width: thin;overflow-y: scroll;.msgBox {display: flex;flex-direction: row;padding: 5px;white-space: wrap;.name {color: #8ce7ff;margin-right: 2px;white-space: nowrap;}.msg {color: white;white-space: wrap;}}}

沒使用之前頁面會渲染超級多個div元素，但是使用這個虛擬列表之后，就只會渲染在視窗里面的元素：頁面中元素數量一直就是這多，超過了就不會渲染出來

自動滾動到底部

想要讓消息內容自動滾動到底部，適用于直播間彈幕消息或者聊天消息等結構，可以嘗試使用這種方式。但是需要注意：獲取DynamicScroller這個組件的時候，要使用document.getElementById('liveMsg')這種形式，不能使用ref這種，因為ref獲取到的并不是一個html元素，沒有scrollTop方法，所以無法滾動到底部。

// 滾動盒子到底部if (liveMsg.value) {const msgDom: HTMLElement | null = document.getElementById('liveMsg')console.log('liveMsg.value--', msgDom)if (msgDom) {msgDom.scrollTop = msgDom.scrollHeight}}

我這就是在收到message消息的時候就執行這個滾動的方法：

最后實現的抖音直播間的彈幕滾動效果：

開源地址：GitHub - Sjj1024/LiveBox: livebox