以下是一个示例代码展示了如何创建一个带有虚拟滚动器的表格：

HTML代码：

  

    

      

        
ID
        
Name
        
Age
        
City
      
    
    

      
    
  

CSS代码：

#table-container {
  height: 300px;  /* 指定表格容器的高度 */
  overflow-y: scroll;  /* 启用垂直滚动条 */
}

#data-table {
  width: 100%;
}

#data-table th, #data-table td {
  padding: 8px;
  border: 1px solid #ddd;
}

JavaScript代码：

const tableContainer = document.getElementById('table-container');
const tableBody = document.getElementById('data-table-body');

const rowCount = 1000;  // 表格行数
const rowHeight = 40;  // 表格行高度
const visibleRows = Math.ceil(tableContainer.clientHeight / rowHeight);  // 可见行数

// 动态生成表格内容
for (let i = 1; i <= rowCount; i++) {
  const row = document.createElement('tr');
  row.innerHTML = `${i}
                   John Doe
                   25
                   New York`;
  tableBody.appendChild(row);
}

// 更新表格容器的滚动区域高度，使滚动条正确显示
tableContainer.style.height = `${visibleRows * rowHeight}px`;

上述代码通过设置表格容器的固定高度和启用垂直滚动条，实现了虚拟滚动器的效果。使用JavaScript动态生成表格内容，并根据可见行数动态计算表格容器的高度，确保滚动条正确显示。