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;
}