Vaadin 23.3.3大表格滚动异常：内部滚动而非页面滚动

问题概述 #

使用Vaadin 23.3.3构建的表格（100行×12列，无懒加载，一次性渲染所有行），在单元格采用**简单布局（div > span > span）时出现滚动异常：鼠标在表格外部拖动滚动条时页面滚动正常，但鼠标在表格内部滚动时，表格会原地滚动，行被推至表头下方；而单元格切换为复杂布局（div > span > span + vaadin-icon + tooltip）**时无此问题。同时表格渲染耗时超5秒（此问题另行排查）。

可行解决方案 #

1. 强制表格重新计算尺寸 #

在表格数据加载完成或布局切换后，主动触发表格的尺寸重计算：

// 针对Vaadin Grid
grid.recalculateColumnWidths();
// 或直接调用前端API强制更新表格体尺寸
grid.getElement().executeJs("this.$.tableBody.updateSize()");

建议在grid.setItems()完成后，或者布局切换的回调方法中执行上述代码。

2. 触发浏览器强制重绘 #

若尺寸重计算无效，可通过临时修改元素样式触发浏览器重绘，修正高度计算偏差：

Element gridElement = grid.getElement();
// 添加临时样式类
gridElement.getClassList().add("force-redraw");
// 下一帧移除样式，触发重绘
UI.getCurrent().getPage().executeJs("requestAnimationFrame(() => $0.classList.remove('force-redraw'))", gridElement);

可选添加CSS（确保样式生效）：

.force-redraw {
  transform: translateZ(0); /* 触发GPU加速，强制重绘 */
}

3. 修正简单布局的单元格高度计算 #

简单布局的单元格可能因内容无明确高度，导致浏览器无法正确计算表格总高度。可给单元格内元素设置明确尺寸：

/* 针对简单布局的单元格元素 */
.grid-cell-simple span {
  display: inline-block;
  line-height: 1.5; /* 或固定高度，比如height: 24px; */
}

在构建简单布局的单元格组件时，为外层div添加grid-cell-simple类名，确保样式生效。

4. 确认表格高度配置 #

检查表格的高度设置，确保表格总高度被正确计算：

• 若使用grid.setHeightByRows(true)，确保所有行的高度能被正确累加；
• 若设置固定高度，确保高度值足够容纳所有行，避免表格内部出现滚动条干扰页面滚动。

内容的提问来源于stack exchange，提问作者The Shoe Shiner