如何为Interactive Grid的3个可编辑列单独设置滚动条？

以下是针对Oracle APEX Interactive Grid的具体实现方案，分两种常见场景处理：

场景1：右侧3个可编辑列作为整体横向滚动（左侧5列固定） #

适合列总宽度超出容器，需要固定左侧不可编辑列、仅右侧可编辑区域横向滚动的情况：

1. 标记可编辑列：
   编辑Interactive Grid的列属性，给右侧3个可编辑列的CSS类字段都填入同一个类名，比如 editable-scroll-cols。

2. 添加自定义CSS：
   在页面的「内联CSS」区域（或主题的自定义CSS文件）添加以下代码：

   /* 固定左侧不可编辑列，防止被滚动内容覆盖 */
   .aig-grid .aig-column:not(.editable-scroll-cols) {
       position: sticky;
       left: 0;
       background-color: #ffffff;
       z-index: 1;
   }
   
   /* 让包含可编辑列的容器支持横向滚动 */
   .aig-grid .aig-columns-container {
       overflow-x: auto;
   }
   

场景2：单个可编辑列单元格内容纵向滚动 #

适合可编辑列的单元格内容过多，需要在单元格内部添加纵向滚动条的情况：

1. 标记可编辑列：
   给3个可编辑列添加共同的CSS类，比如 editable-cell-scroll。

2. 添加自定义CSS：

   /* 设置单元格最大高度，超出部分显示滚动条 */
   .editable-cell-scroll .aig-cell {
       max-height: 70px; /* 根据实际需求调整高度 */
       overflow-y: auto;
       padding: 4px 8px; /* 可选：调整内边距避免滚动条挤压内容 */
   }
   
   /* 优化滚动条样式（可选） */
   .editable-cell-scroll .aig-cell::-webkit-scrollbar {
       width: 6px;
   }
   .editable-cell-scroll .aig-cell::-webkit-scrollbar-thumb {
       background-color: #ccc;
       border-radius: 3px;
   }
   

注意事项 #

• 测试时确保Interactive Grid的「布局」属性中，「固定表头」等设置不会与自定义CSS冲突。
• 使用sticky定位时，需保证IG的容器未设置overflow: hidden，否则sticky定位会失效。

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