Custom scrollbar on v-data-table

Question

I try to change style on v-data-table (vuetify). This code changes scrolls on all places (browser scrolls too).

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

How can I change scroll style for a specific element? These solutions don't work:

<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

You need to target v-data-table inner element which is scrollable:

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