v-data-table上的自定义滚动条

Question

我试图更改v-data-table(vuetify(的样式。此代码更改所有位置的滚动(浏览器也会滚动(。

<style>
::-webkit-scrollbar {
width: 24px;
height: 8px;
background-color: #143861;
}
</style>

如何更改特定元素的滚动样式？这些解决方案不起作用：

<style>
#element::-webkit-scrollbar {
width: 24px;
height: 8px;
background-color: #143861;
}
</style>

<v-data-table
:headers="headers"
:items="items"
item-key="id"
id="element"
>
</v-data-table>

<style>
.element::-webkit-scrollbar {
width: 24px;
height: 8px;
background-color: #143861;
}
</style>

<v-data-table
:headers="headers"
:items="items"
item-key="id"
class="element"
>
</v-data-table>

Answer 1

您需要针对可滚动的v-data-table内部元素：

.element .v-data-table__wrapper::-webkit-scrollbar {
width: 24px;
height: 8px;
background-color: #143861;
}