html 用于Angular 材料表的自定义滚动条，无需删除表格样式

z2acfund 于 2023-09-28 发布在 Angular

关注(0)|答案(1)|浏览(112)

当自定义滚动条具有透明背景时，如何防止Angular Material表格的表格样式消失？
目前，发生了以下情况（我将滚动条加宽以查看问题）。

超文本标记语言：

<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固定（即具有列名的行）也很重要，这样即使在滚动时也可以看到它。粘糊糊的就有可能。

Html

来源：https://stackoverflow.com/questions/77149493/custom-scrollbar-for-angular-material-table-without-removing-table-styles

1条答案

按热度按时间

kse8i1jr1#

将您的Angular Material表格 Package 在一个没有应用自定义滚动条样式的容器中：

<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表格的样式发生冲突，并且即使您有一个带有透明背景的自定义滚动条，表格的外观也应该保持一致。

赞(0）回复(0）举报 2023-09-28

我来回答

html 用于Angular 材料表的自定义滚动条，无需删除表格样式

1条答案

相关问题

热门标签

最新问答