当前位置：首页 > JavaScript

js实现v

2026-04-05 05:46:22JavaScript

以下是JavaScript实现虚拟滚动（Virtual Scroll）的核心方法，适用于大数据列表的高性能渲染：

核心实现原理

虚拟滚动通过动态计算可视区域内的元素进行渲染，大幅减少DOM节点数量。关键在于监听滚动事件，计算当前可视区域的起始索引和结束索引。

基本实现步骤

创建容器元素并设置固定高度和overflow属性，使其成为滚动容器

const container = document.createElement('div');
container.style.height = '500px';
container.style.overflow = 'auto';

计算可见区域能容纳的项目数量

js实现v

const itemHeight = 50; // 每个项目固定高度
const visibleCount = Math.ceil(container.clientHeight / itemHeight);

创建内容容器作为滚动内容的占位元素

const content = document.createElement('div');
content.style.height = `${data.length * itemHeight}px`;
container.appendChild(content);

实现滚动事件处理函数

let startIndex = 0;
container.addEventListener('scroll', () => {
  const scrollTop = container.scrollTop;
  startIndex = Math.floor(scrollTop / itemHeight);
  renderItems();
});

动态渲染可见项的函数

js实现v

function renderItems() {
  const endIndex = Math.min(startIndex + visibleCount, data.length - 1);

  // 清除现有渲染项
  while (content.firstChild) {
    content.removeChild(content.firstChild);
  }

  // 只渲染可见项
  for (let i = startIndex; i <= endIndex; i++) {
    const item = document.createElement('div');
    item.style.height = `${itemHeight}px`;
    item.style.position = 'absolute';
    item.style.top = `${i * itemHeight}px`;
    item.textContent = data[i];
    content.appendChild(item);
  }
}

性能优化建议

使用requestAnimationFrame来节流滚动事件处理

let isScrolling = false;
container.addEventListener('scroll', () => {
  if (!isScrolling) {
    window.requestAnimationFrame(() => {
      // 滚动处理逻辑
      isScrolling = false;
    });
    isScrolling = true;
  }
});

对于可变高度的项目，需要预先计算并缓存每个项目的位置信息

const positions = [];
let totalHeight = 0;

data.forEach((item, index) => {
  positions.push({
    index,
    top: totalHeight,
    height: getItemHeight(item) // 自定义高度计算函数
  });
  totalHeight += positions[index].height;
});

React实现示例

使用React Hooks的简化实现

function VirtualList({ data, itemHeight, renderItem }) {
  const [startIndex, setStartIndex] = useState(0);
  const containerRef = useRef(null);

  const handleScroll = () => {
    if (containerRef.current) {
      const scrollTop = containerRef.current.scrollTop;
      setStartIndex(Math.floor(scrollTop / itemHeight));
    }
  };

  const visibleCount = Math.ceil(containerRef.current?.clientHeight / itemHeight) || 0;
  const endIndex = Math.min(startIndex + visibleCount, data.length - 1);

  return (
    <div 
      ref={containerRef} 
      style={{ height: '100%', overflow: 'auto' }}
      onScroll={handleScroll}
    >
      <div style={{ height: `${data.length * itemHeight}px` }}>
        {data.slice(startIndex, endIndex + 1).map((item, i) => (
          <div 
            key={startIndex + i}
            style={{ 
              position: 'absolute',
              top: `${(startIndex + i) * itemHeight}px`,
              height: `${itemHeight}px`
            }}
          >
            {renderItem(item)}
          </div>
        ))}
      </div>
    </div>
  );
}