Angular Material Table 的自定义滚动条，无需删除表格样式

Question

当自定义滚动条具有透明背景时，如何防止 Angular Material 表格的表格样式消失？

目前，发生以下情况（我将滚动条加宽以查看问题）。

HTML：

<div class="container-list">
    <mat-table mat-table [dataSource]="dataSource" matSort>
        <!-- ... insert basic table definition (like here: https://material.angular.io/components/table/examples#table-basic)  ... -->
    </mat-table>
</div>

CSS（自定义滚动条）：

.container-list {
    overflow: auto;
    height: 500px;
}
  
.container-list::-webkit-scrollbar {
    width: 30px;
    height: 8px;
    border-radius: 30px;
    background-color: transparent
}
  
.container-list::-webkit-scrollbar-thumb {
    border-radius: 30px;
    background-color: black;
}
  
.container-list::-webkit-scrollbar-button,
.container-list::-webkit-scrollbar-track,
.container-list::-webkit-scrollbar-track-piece,
.container-list::-webkit-scrollbar-corner,
.container-list::-webkit-resizer {
display: none;
}

.container-list::-webkit-scrollbar-track-piece:start {
    margin-top: 450px;
}

不显示整个侧边栏是我找到的唯一解决方案，但这不是我想要的。

.container-list::-webkit-scrollbar {
    display: none;
}

保持 mat-header-row 固定（即具有列名称的行）也很重要，这样即使在滚动时它也能保持在视图中。使用 sticky 可以轻松做到这一点，但它总是离开视口。

Answer 1

将 Angular Material 表包装在未应用自定义滚动条样式的容器中：

<div class="container-list"> <mat-table mat-table [dataSource]="dataSource" matSort>
<!-- ... insert basic table definition ... --> </mat-table>

为您的自定义滚动条创建一个单独的容器，并将滚动条样式应用到该容器：

<div class="custom-scrollbar-container"> <!-- Content goes here, including your Angular Material table if needed --> </div>

将自定义滚动条样式应用于.custom-scrollbar-container：

.custom-scrollbar-container { overflow: auto; height: 500px; }

.custom-scrollbar-container::-webkit-scrollbar {
  width: 30px;
  height: 8px;
  border-radius: 30px;
  background-color: transparent;
}

.custom-scrollbar-container::-webkit-scrollbar-thumb {
  border-radius: 30px;
  background-color: black;
}

.custom-scrollbar-container::-webkit-scrollbar-button,
.custom-scrollbar-container::-webkit-scrollbar-track,
.custom-scrollbar-container::-webkit-scrollbar-track-piece,
.custom-scrollbar-container::-webkit-scrollbar-corner,
.custom-scrollbar-container::-webkit-resizer {
  display: none;
}

.custom-scrollbar-container::-webkit-scrollbar-track-piece:start {
  margin-top: 450px;
}

通过将自定义滚动条样式封装在 .custom-scrollbar-container 中，您应该能够避免干扰 Angular Material 表格的样式，并且即使您有具有透明背景的自定义滚动条，表格的外观也应该保持一致.