Vaadin 23 Grid能否通过编程实现以列为参照的横向滚动？

Vaadin 23的Grid组件没有直接提供横向滚动到指定列的API，但可以通过操作Grid的DOM元素结合JavaScript来实现，同时保留当前垂直滚动位置。以下是具体实现方案：

核心思路 #

Grid的横向滚动容器是其shadow DOM中带有part~="scrollable"的元素，我们可以通过定位目标列的DOM节点，调用scrollIntoView方法或直接设置滚动容器的scrollLeft属性来实现横向滚动，同时通过参数控制不改变垂直滚动位置。

方案1：通过scrollIntoView滚动到目标列 #

这种方式更简洁，浏览器会自动处理滚动对齐，且能保持垂直位置不变：

// 假设你的Grid类型为Grid<MyItem>，目标列已设置key为"targetColumn"
Grid<MyItem> grid = ...;
Column<MyItem> targetColumn = grid.getColumnByKey("targetColumn");
String columnDomId = targetColumn.getElement().getAttribute("id");

// 执行客户端JavaScript实现滚动
grid.getElement().executeJs("""
    const columnElement = document.getElementById($0);
    const scrollContainer = this.shadowRoot.querySelector('[part~="scrollable"]');
    if (columnElement && scrollContainer) {
      // block: 'nearest' 确保垂直方向不滚动，inline: 'start' 让列对齐容器左侧
      columnElement.scrollIntoView({ block: 'nearest', inline: 'start' });
    }
""", columnDomId);

方案2：直接设置滚动容器的scrollLeft #

如果需要更精确控制滚动位置，可以计算目标列的偏移量后直接设置scrollLeft：

Grid<MyItem> grid = ...;
Column<MyItem> targetColumn = grid.getColumnByKey("targetColumn");
String columnDomId = targetColumn.getElement().getAttribute("id");

grid.getElement().executeJs("""
    const columnElement = document.getElementById($0);
    const scrollContainer = this.shadowRoot.querySelector('[part~="scrollable"]');
    if (columnElement && scrollContainer) {
      // 计算目标列相对于滚动容器的左侧偏移
      const targetOffset = columnElement.offsetLeft - scrollContainer.offsetLeft;
      // 仅修改横向滚动位置，保留垂直滚动值
      scrollContainer.scrollLeft = targetOffset;
    }
""", columnDomId);

快捷滚动到首列/末列 #

如果需要快速滚动到第一列或最后一列，可以简化代码：

滚动到首列

grid.getElement().executeJs("""
    const scrollContainer = this.shadowRoot.querySelector('[part~="scrollable"]');
    if (scrollContainer) scrollContainer.scrollLeft = 0;
""");

滚动到末列

grid.getElement().executeJs("""
    const scrollContainer = this.shadowRoot.querySelector('[part~="scrollable"]');
    if (scrollContainer) {
      scrollContainer.scrollLeft = scrollContainer.scrollWidth - scrollContainer.clientWidth;
    }
""");

注意事项 #

• 确保在Grid数据加载完成后调用上述代码，比如在AfterNavigationEvent回调、Grid的DataProvider加载完成事件中执行，避免目标列DOM元素尚未渲染。
• 目标列必须设置唯一的key（通过column.setKey("xxx")），这样才能通过getColumnByKey准确获取列对象。
• 若Grid使用了列分组，需要确保定位到的是实际的列单元格元素，而非分组表头元素。

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