为Angular Material Table添加自定义滚动条并保留样式及固定表头

问题根源 #

你当前的CSS中，container-list::-webkit-scrollbar-track-piece:start { margin-top: 450px; } 这个设置会把滚动轨道的顶部区域强制下移450px，直接覆盖/挤压了表格的表头和内容区域，导致样式异常。同时将滚动条的track、track-piece等元素设为display: none，会破坏滚动条轨道的空间预留，影响表格布局。

修复方案 #

1. 确保表头sticky设置正确 #

在表格的表头行定义中添加sticky: true：

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

2. 调整自定义滚动条CSS #

移除错误的margin-top设置，同时保留滚动条轨道的空间，仅将背景设为透明，不要隐藏轨道元素：

.container-list {
    overflow: auto;
    height: 500px;
    /* 可选：添加边框避免滚动条出现时表格宽度跳动 */
    border-right: 1px solid transparent;
}

/* 自定义滚动条整体 */
.container-list::-webkit-scrollbar {
    width: 30px;
    height: 8px;
}

/* 滚动条轨道 */
.container-list::-webkit-scrollbar-track {
    border-radius: 30px;
    background-color: transparent;
}

/* 滚动条滑块 */
.container-list::-webkit-scrollbar-thumb {
    border-radius: 30px;
    background-color: black;
    /* 可选：添加内边距让滑块和轨道之间有空隙，更美观 */
    border: 8px solid transparent;
    background-clip: content-box;
}

/* 隐藏不需要的滚动条元素 */
.container-list::-webkit-scrollbar-button,
.container-list::-webkit-scrollbar-corner,
.container-list::-webkit-resizer {
    display: none;
}

3. 额外说明 #

• 移除display: none的滚动条track和track-piece，改为设置background-color: transparent，这样能保留滚动条轨道的空间，避免表格布局被挤压。
• 给滑块添加border和background-clip: content-box，可以让滑块在透明轨道中看起来更独立，同时不破坏轨道的空间预留。
• 给容器添加透明右边框，能避免滚动条出现/消失时表格宽度突然变化，提升视觉稳定性。

这样调整后，既能实现透明背景的自定义滚动条，又能保留表头固定的功能，同时不会破坏表格的原有样式。

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