JavaScript虚拟滚动实现-js教程-PHP中文网

JavaScript虚拟滚动实现

紅蓮之龍

发布： 2025-10-22 10:25:02

原创

1012人浏览过

虚拟滚动通过只渲染可视区和缓冲区元素来提升长列表性能，利用占位器维持滚动高度，滚动时动态更新元素位置与内容，核心是计算可视区域的起始索引并复用DOM，结合requestAnimationFrame优化渲染。

javascript虚拟滚动实现

虚拟滚动的核心是只渲染可视区域内的元素，而不是一次性加载全部数据。这样可以极大提升长列表的性能。实现的关键在于计算当前可视区域应该显示哪些项，并动态更新内容。

基本原理

当列表项数量很大时（比如上万条），直接渲染会导致页面卡顿甚至崩溃。虚拟滚动通过以下方式解决这个问题：

只创建可视区域内及少量缓冲区的DOM元素
用一个占位的空白容器撑起整体滚动高度，保持滚动条正常显示
滚动时动态更新可见项的内容和位置

关键参数计算

要实现虚拟滚动，需要知道几个核心值：

itemHeight：每项的高度（固定高度更简单）
containerHeight：容器的可视高度
visibleCount：可视区域内能显示的项目数量，Math.ceil(containerHeight / itemHeight)
startIndex 和 endIndex：根据滚动位置计算当前应显示的起始和结束索引

实现步骤

下面是一个简单的实现思路：

立即学习“Java免费学习笔记（深入）”；

阿里云-虚拟数字人

阿里云-虚拟数字人是什么？ ...

查看详情

创建外层容器并监听 scroll 事件
使用一个 div 作为占位器（padding 或 transform 模拟位置）
内部渲染有限数量的 item 元素，复用它们
滚动时计算 startIndex = Math.floor(scrollTop / itemHeight)
显示从 startIndex 开始的 visibleCount + buffer 个元素

示例代码片段：

<font>
const container = document.getElementById('container');
const itemHeight = 50;
const containerHeight = 500;
const visibleCount = Math.ceil(containerHeight / itemHeight);
const buffer = 5; // 额外渲染上下各5个元素防白屏
const totalItems = 10000;
<p>container.style.height = <code>${containerHeight}px</code>;
container.style.overflow = 'auto';
container.style.position = 'relative';</p><p>const content = document.createElement('div');
content.style.position = 'absolute';
content.style.width = '100%';
container.appendChild(content);</p><p>function updateVisibleItems() {
const scrollTop = container.scrollTop;
const start = Math.max(0, Math.floor(scrollTop / itemHeight) - buffer);
const end = Math.min(totalItems, start + visibleCount + buffer * 2);</p><p>// 更新占位高度
content.style.transform = <code>translateY(${start * itemHeight}px)</code>;</p><p>// 清空并重新填充可见项
content.innerHTML = '';
for (let i = start; i < end; i++) {
const item = document.createElement('div');
item.style.height = <code>${itemHeight}px</code>;
item.textContent = <code>Item ${i}</code>;
content.appendChild(item);
}
}</p><p>container.addEventListener('scroll', () => {
requestAnimationFrame(updateVisibleItems);
});</p><p>// 初始渲染
updateVisibleItems();
</font>

登录后复制