如何实现XY轴无限范围的按钮表格（HTML/CSS/JS）

嘿，我完全懂你想要的效果——像shapez.io那样的无限网格，但直接生成无限DOM肯定行不通，你原来的代码死循环就是因为用了-Infinity到Infinity的循环，浏览器根本不可能跑完这个逻辑！咱们换个更聪明的思路：虚拟渲染，只渲染视口内（加一点缓冲）的单元格，这样既能模拟无限空间，又不会把浏览器搞崩。

下面是具体的实现方案，用HTML/CSS/JS就能搞定：

核心思路 #

不要试图生成所有单元格（这根本不可能），而是：

• 用一个带滚动的容器模拟无限空间
• 监听滚动事件，计算当前视口能看到的行列范围
• 只渲染这个范围内的单元格，滚动时动态更新（销毁离开视口的，创建新进入的）
• 缩放功能通过调整单元格尺寸实现，同时同步滚动位置保持体验流畅

分步实现代码示例 #

1. HTML结构 #

<div id="tableContainer">
  <div id="virtualTable"></div>
</div>

2. CSS样式 #

#tableContainer {
  width: 800px;
  height: 600px;
  overflow: auto;
  border: 1px solid #ccc;
  position: relative;
}

#virtualTable {
  position: absolute;
  /* 初始先设置一个足够大的尺寸撑开滚动条，后续可以动态调整 */
  width: 20000px;
  height: 20000px;
  transform-origin: center center;
}

.cell {
  width: 50px;
  height: 50px;
  border: 1px solid #eee;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cell button {
  width: 80%;
  height: 60%;
  cursor: pointer;
}

3. JavaScript逻辑 #

const container = document.getElementById('tableContainer');
const virtualTable = document.getElementById('virtualTable');

// 单元格尺寸（可通过缩放调整）
let cellSize = 50;
// 缓冲行列数：视口外多渲染几行/列，避免滚动时出现空白
const buffer = 2;

// 计算当前可见的行列范围
function getVisibleRange() {
  const containerRect = container.getBoundingClientRect();
  // 计算滚动偏移对应的行列（注意要考虑缩放）
  const scrollLeft = container.scrollLeft / cellSize;
  const scrollTop = container.scrollTop / cellSize;
  
  // 可见的起始/结束行列
  const startCol = Math.floor(scrollLeft) - buffer;
  const endCol = Math.ceil(scrollLeft + containerRect.width / cellSize) + buffer;
  const startRow = Math.floor(scrollTop) - buffer;
  const endRow = Math.ceil(scrollTop + containerRect.height / cellSize) + buffer;
  
  return { startCol, endCol, startRow, endRow };
}

// 渲染可见区域的单元格
function renderCells() {
  const { startCol, endCol, startRow, endRow } = getVisibleRange();
  
  // 先移除所有已渲染的单元格
  while (virtualTable.firstChild) {
    virtualTable.removeChild(virtualTable.firstChild);
  }
  
  // 遍历可见行列，创建单元格
  for (let row = startRow; row <= endRow; row++) {
    for (let col = startCol; col <= endCol; col++) {
      const cell = document.createElement('div');
      cell.className = 'cell';
      // 设置单元格位置（行列坐标 * 单元格尺寸）
      cell.style.left = `${col * cellSize}px`;
      cell.style.top = `${row * cellSize}px`;
      
      // 添加按钮和行列标识
      cell.innerHTML = `
        <button data-row="${row}" data-col="${col}">${row}, ${col}</button>
      `;
      
      // 单元格点击事件（或者直接给按钮绑事件）
      cell.addEventListener('click', () => {
        console.log(`点击了单元格：行${row}，列${col}`);
      });
      
      virtualTable.appendChild(cell);
    }
  }
}

// 缩放功能：监听鼠标滚轮
container.addEventListener('wheel', (e) => {
  e.preventDefault();
  // 控制缩放步长，比如每次缩放10%
  const scaleFactor = e.deltaY > 0 ? 0.9 : 1.1;
  cellSize *= scaleFactor;
  
  // 调整虚拟表格的尺寸（保持足够大）
  virtualTable.style.width = `${20000 * scaleFactor}px`;
  virtualTable.style.height = `${20000 * scaleFactor}px`;
  
  // 调整滚动位置，保持缩放时视口中心不变
  const containerRect = container.getBoundingClientRect();
  const centerX = container.scrollLeft + containerRect.width / 2;
  const centerY = container.scrollTop + containerRect.height / 2;
  
  container.scrollLeft = centerX * scaleFactor - containerRect.width / 2;
  container.scrollTop = centerY * scaleFactor - containerRect.height / 2;
  
  renderCells();
});

// 监听滚动事件，更新渲染
container.addEventListener('scroll', renderCells);

// 初始渲染
renderCells();

为什么你的原代码不行？ #

你写的for (var i = -Infinity; i < Infinity; i++)是个永远不会终止的循环——计算机没办法处理无限的数值范围，浏览器会一直创建<tr>和<td>直到内存耗尽崩溃。虚拟渲染的思路就是避开这个问题，只处理用户能看到的部分。

这个示例已经实现了：

• 无限范围的表格（通过滚动条模拟，滚动时动态渲染）
• 双向滚动（横向+纵向）
• 缩放功能（滚轮控制，保持视口中心）
• 单元格/按钮的点击检测（带行列坐标标识）

你可以根据需求调整单元格尺寸、缓冲数量、缩放步长这些参数，甚至给不同行列的单元格加不同样式~

内容的提问来源于stack exchange，提问作者Bagel03