AG Grid固定列场景下横向滚动条不显示，如何恢复显示？

针对你在Svelte项目中使用AG Grid时，中间非固定列可滚动但看不到横向滚动条的问题，可尝试以下几种修复方式：

1. 调整容器宽度限制 #

确保AG Grid的容器有明确的宽度约束，避免中间列区域无法触发滚动条：

:global(.grid-container) {
    width: 100%;
    max-width: 100vw; /* 限制容器最大宽度为视口宽度 */
    height: 100%;
    overflow: hidden; /* 避免容器自身滚动，让中间列区域单独滚动 */
}

2. 强制显示滚动条并定制样式 #

AG Grid默认可能隐藏了滚动条，通过CSS强制显示并适配不同浏览器：

:global(.ag-center-cols-viewport) {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    /* Firefox */
    scrollbar-width: auto;
    /* IE/Edge */
    -ms-overflow-style: auto;
}

/* Chrome/Safari等WebKit浏览器 */
:global(.ag-center-cols-viewport::-webkit-scrollbar) {
    height: 8px; /* 设置滚动条高度，确保可见 */
}

:global(.ag-center-cols-viewport::-webkit-scrollbar-track) {
    background: #f1f1f1;
}

:global(.ag-center-cols-viewport::-webkit-scrollbar-thumb) {
    background: #888;
    border-radius: 4px;
}

:global(.ag-center-cols-viewport::-webkit-scrollbar-thumb:hover) {
    background: #555;
}

3. 检查AG Grid配置 #

确保Grid配置中没有禁用横向滚动，且固定列设置正确：

// 示例列配置
const columnDefs = [
    { field: 'leftCol1', pinned: 'left' },
    { field: 'leftCol2', pinned: 'left' },
    { field: 'normalCol1' },
    { field: 'normalCol2' },
    // ... 其他非固定列
    { field: 'rightCol1', pinned: 'right' },
    { field: 'rightCol2', pinned: 'right' },
];

const gridOptions = {
    columnDefs,
    // 确保未禁用横向滚动
    suppressHorizontalScroll: false,
};

4. 排查全局样式干扰 #

检查项目中是否有全局CSS隐藏了滚动条（比如scrollbar-width: none或::-webkit-scrollbar { display: none }），确保这些样式不会作用于.ag-center-cols-viewport元素。

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