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

js怎么实现虚拟滚动

畫卷琴夢

发布： 2025-08-17 12:50:02

原创

945人浏览过

虚拟滚动通过只渲染可视区域内容来提升性能，其核心是计算可视范围并动态渲染；实现步骤为：1. 监听滚动事件获取滚动位置；2. 根据滚动位置和项高度计算应显示的数据索引范围；3. 仅渲染该范围内的数据；4. 设置容器高度以保持滚动条正确；5. 使用 transform: translatey 或绝对定位将内容定位到正确位置；性能提升原因在于大幅减少dom操作；优化方式包括：使用 requestanimationframe 减少重绘、避免复杂css、缓存已渲染项、利用 intersection observer 精准监听可见性；常见问题有：列表项高度不一时需预存高度、快速滚动可能导致跳跃、需自定义滚动条样式以维持体验；示例代码展示了基于固定高度的简化实现，通过绝对定位和 scroll 事件动态更新渲染内容，确保长列表高效滚动。

js怎么实现虚拟滚动

虚拟滚动，简单来说，就是只渲染用户可见区域的内容，而不是一次性渲染整个列表。这样做的好处是显著提升长列表的渲染性能，尤其是在移动端，效果更为明显。

虚拟滚动的核心在于计算可视区域内应该渲染哪些数据，以及如何定位这些数据在整个列表中的位置。

实现方案：

阿里云-虚拟数字人

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

查看详情

计算可视区域的数据范围： 监听滚动事件，获取滚动位置。根据滚动位置和列表项的高度，计算出当前可视区域应该显示的数据索引范围。
渲染可视区域的数据： 只渲染计算出的数据索引范围内的数据。
调整滚动容器的高度： 设置滚动容器的高度，使其能够容纳整个列表的内容，即使只渲染了部分数据，也能保证滚动条的正确显示。
使用 transform: translateY 定位： 根据当前可视区域的起始索引，计算出偏移量，并使用
```
transform: translateY
```
登录后复制
将可视区域的内容定位到正确的位置。

为什么虚拟滚动能提升性能？

传统滚动会一次性渲染所有列表项，当列表项数量巨大时，会造成大量的 DOM 操作，导致页面卡顿。虚拟滚动只渲染可视区域内的列表项，大大减少了 DOM 操作的数量，从而提升了渲染性能。想象一下，你有一本1000页的书，传统方式是直接把所有页都摊开，而虚拟滚动则是只打开你正在阅读的那几页。

如何优化虚拟滚动的性能？

使用 requestAnimationFrame： 在滚动事件处理函数中使用
```
requestAnimationFrame
```
登录后复制
，可以避免频繁的 DOM 操作，提高渲染效率。
避免复杂的 CSS 样式： 复杂的 CSS 样式会增加浏览器的渲染负担，尽量使用简单的 CSS 样式。
使用缓存： 缓存已经渲染过的列表项，避免重复渲染。
使用 Intersection Observer API： 可以使用 Intersection Observer API 来监听元素是否进入可视区域，从而更精确地控制渲染。

虚拟滚动有哪些常见的坑？

列表项高度不固定： 如果列表项的高度不固定，需要动态计算每个列表项的高度，这会增加计算的复杂度。一种解决方案是预先计算每个列表项的高度，并将其存储起来。
滚动跳跃： 在快速滚动时，可能会出现滚动跳跃的现象。这通常是由于计算不精确或者渲染不及时造成的。可以尝试调整计算参数或者使用
```
requestAnimationFrame
```
登录后复制
来优化渲染。
滚动条样式： 虚拟滚动会改变滚动条的行为，需要自定义滚动条样式，以保证用户体验。

// 示例代码 (简化版)
const list = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);
const container = document.getElementById('container');
const itemHeight = 30; // 假设每个 item 高度 30px
const visibleCount = Math.ceil(container.clientHeight / itemHeight); // 计算可视区域能容纳多少个 item
const totalHeight = list.length * itemHeight;
container.style.height = `${totalHeight}px`; // 撑开容器

function render(start) {
  const fragment = document.createDocumentFragment();
  for (let i = start; i < start + visibleCount; i++) {
    if (i >= list.length) break;
    const item = document.createElement('div');
    item.textContent = list[i];
    item.style.height = `${itemHeight}px`;
    item.style.lineHeight = `${itemHeight}px`;
    item.style.position = 'absolute';
    item.style.top = `${i * itemHeight}px`; // 直接定位
    fragment.appendChild(item);
  }
  container.innerHTML = ''; // 清空
  container.appendChild(fragment);
}

container.addEventListener('scroll', () => {
  const scrollTop = container.scrollTop;
  const start = Math.floor(scrollTop / itemHeight);
  requestAnimationFrame(() => render(start));
});

render(0); // 初始渲染

登录后复制

这段代码简化了定位的实现，直接用