如何修改Vuetify中指定id的v-select组件滚动条样式？

问题原因 #

Vuetify的v-select下拉菜单默认通过Portal组件挂载到body根节点下，而非v-select自身的DOM层级内。你直接给v-select的id="selectScroll"设置滚动条样式，无法作用到实际承载下拉选项的滚动容器上——因为那个滚动容器不在v-select的DOM结构里。

解决方案 #

通过menu-props给目标v-select的下拉菜单添加自定义类名，再针对该类名下的滚动元素设置样式，就能精准修改指定v-select的滚动条。

修改后的完整代码 #

HTML部分

<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://unpkg.com/@mdi/font@6.x/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.7.1/dist/vuetify.min.css">
<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.7.1/dist/vuetify.min.js"></script>
</head>
<body>
<div id="app">
  <v-app id="inspire">
    <v-container fluid>
          <v-select
             id="selectScroll"
            :items="items"
            label="Change Scrollbar"
            <!-- 给下拉菜单内容容器添加自定义类名 -->
            :menu-props="{ contentClass: 'custom-select-menu' }"
          ></v-select>

          <v-select
            :items="items"
            label="No Scrollbar Change"
          ></v-select>
    
      <v-card id="cardScroll" style="height:200px;overflow-y:auto">
        <v-card-text v-for="test in 20" :key="test">
         {{ test }}
        </v-card-text>
      </v-card>
    </v-container>
  </v-app>
</div>

</body>
</html>

CSS部分

/* 仅作用于指定v-select的下拉滚动条 */
.custom-select-menu .v-list::-webkit-scrollbar{
    width: 10px;
}
.custom-select-menu .v-list::-webkit-scrollbar-track{
    box-shadow: inset 0 0 5px grey;
}
.custom-select-menu .v-list::-webkit-scrollbar-thumb{
    background-color: #b85125;
}
.custom-select-menu .v-list::-webkit-scrollbar-thumb:hover{
    background-color: #962d00;
}

/* SCROLL STYLE FOR V-CARD */
#cardScroll::-webkit-scrollbar{
    width: 10px;
}
#cardScroll::-webkit-scrollbar-track{
    box-shadow: inset 0 0 5px grey;
}
#cardScroll::-webkit-scrollbar-thumb{
    background-color: #1976d2;
}
#cardScroll::-webkit-scrollbar-thumb:hover{
    background-color: #1976d2;
}

JS部分（无需修改）

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: ['Foo1', 'Bar1', 'Fizz1', 'Buzz1', 'Foo2', 'Bar2', 'Fizz2', 'Buzz2', 'Foo3', 'Bar3', 'Fizz3', 'Buzz3'],
  }),
})

补充说明 #

如果是在Vue单文件组件的<style scoped>中编写样式，需要使用深度选择器穿透作用域，比如：

::v-deep .custom-select-menu .v-list::-webkit-scrollbar {
  /* 样式代码 */
}

内容的提问来源于stack exchange，提问作者Keyboard Corporation