为什么我不能改变这个v-select
的滚动?
我想自定义我的v选择滚动条。
在下面的示例中,我做正常的方式,但没有用.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
items: ['Foo1', 'Bar1', 'Fizz1', 'Buzz1', 'Foo2', 'Bar2', 'Fizz2', 'Buzz2', 'Foo3', 'Bar3', 'Fizz3', 'Buzz3'],
}),
})
/* SCROLL STYLE FOR V-SELECT */
#selectScroll::-webkit-scrollbar{
width: 10px;
}
#selectScroll::-webkit-scrollbar-track{
box-shadow: inset 0 0 5px grey;
}
#selectScroll::-webkit-scrollbar-thumb{
background-color: #b85125;
}
#selectScroll::-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;
}
<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/[email protected]/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css">
<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/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"
></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>
如何更改v-select的滚动条,只有id selectScroll
?
1条答案
按热度按时间7kqas0il1#
从v-select文档(menu-props):
将props传递到v-menu组件。接受布尔props menu-props=“auto,overflowY”的字符串或对象:menu-props="{ auto:true,overflowY:true }”
从v-menu文档(内容类)
个字符