Saya mencoba mengubah gaya pada tabel-v-data (vuetify). Kode ini mengubah gulungan di semua tempat (gulungan browser juga).

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

Bagaimana saya bisa mengubah gaya gulir untuk elemen tertentu? Solusi ini tidak berfungsi:

<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>
0
Anna Puchkova 13 Mei 2021, 16:09

1 menjawab

Jawaban Terbaik

Anda perlu menargetkan elemen dalam v-data-table yang dapat digulir:

.element .v-data-table__wrapper::-webkit-scrollbar {
    width: 24px;
    height: 8px;
    background-color: #143861;
}
1
Michal Levý 13 Mei 2021, 14:38