如何让Anvil Data Grid的垂直滚动条固定在视图可见区域？

问题 #

能否通过CSS强制垂直滚动条始终停留在视图的可见区域？

我正在使用Anvil Works，有一个名为Data Grid的容器，内部包含两个子容器：

• data-row-panel：存放表格表头
• repeating-panel：存放数据行

当前代码生成的垂直滚动条位于repeating-panel的末端，必须横向滚动才能看到。由于Anvil对HTML结构控制严格，无法直接编辑HTML，如何让滚动条固定在可见区域内？

原始CSS代码 #

/* 数据网格样式 */
/* 设置包含表头行的data-row-panel为单行并添加滚动条 */
.anvil-role-tonal-data-grid .anvil-data-row-panel {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  min-width: min-content;
  overflow-x: hidden;
}

/* 设置repeating-panel为单列并添加垂直滚动条 */
.anvil-role-tonal-data-grid .repeating-panel {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow-x: hidden;
  min-width: min-content;
  overflow-y: scroll;/* 添加垂直滚动条 */
  max-height: 450px;/* 最大高度 */
}
/* 容纳data-row-panel和repeating-panel的容器 */
.anvil-role-tonal-data-grid .data-grid-child-panel {
  overflow-x: auto !important;
}

生成的HTML结构 #

<div class="data-grid-child-panel">
    <div class="anvil-data-row-panel"></div>
    <div class="repeating-panel"></div>
</div>

解决方案 #

核心思路是将垂直滚动条从repeating-panel转移到外层的data-grid-child-panel，同时让表头和数据行保持横向同步滚动，确保滚动条固定在容器右侧，无需横向滚动即可看到。

修改后的CSS代码如下：

/* 数据网格样式 */
/* 设置表头行容器为单行，允许横向滚动（和数据行同步） */
.anvil-role-tonal-data-grid .anvil-data-row-panel {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  min-width: min-content;
  /* 移除overflow-x: hidden，让表头随数据行横向滚动 */
}

/* 设置数据行容器为单列，移除自身垂直滚动 */
.anvil-role-tonal-data-grid .repeating-panel {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  min-width: min-content;
  overflow-x: hidden; /* 避免数据行内部横向滚动 */
  /* 移除overflow-y: scroll，交给外层容器处理 */
}

/* 外层容器：统一处理横向滚动和垂直滚动 */
.anvil-role-tonal-data-grid .data-grid-child-panel {
  overflow-x: auto !important;
  overflow-y: scroll !important; /* 将垂直滚动条移到外层容器 */
  max-height: 450px; /* 控制整体高度，触发垂直滚动 */
  display: flex;
  flex-direction: column; /* 确保表头和数据行垂直排列 */
}

关键修改说明 #

• 外层容器接管垂直滚动：把max-height和overflow-y: scroll从repeating-panel迁移到data-grid-child-panel，滚动条会显示在整个Data Grid容器的右侧，始终处于视图可见区域。
• 表头与数据行同步滚动：移除anvil-data-row-panel的overflow-x: hidden，使表头能跟随数据行同步横向滚动，保证表头与数据列的对齐性。
• 移除数据行内部滚动：删除repeating-panel的overflow-y: scroll，避免内部出现冗余滚动条，统一由外层容器管理滚动行为。

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