我为 Vuetify 尝试了不同的自定义滚动条,但失败了。这是我尝试过的其中一个(我尝试过 v-导航抽屉(
Vuejs 自定义滚动条https://github.serafin.io/vuebar/#installation
Vuejs 自定义滚动条工作示例https://jsfiddle.net/u94ns8jc/1/?utm_source=website&utm_medium=embed&utm_campaign=u94ns8jc
不起作用的 Vuetify 示例https://codepen.io/kiranvasi/pen/jxEJqB
<v-navigation-drawer
:mini-variant.sync="miniVariant"
:clipped="clipped"
v-model="drawer"
fixed
app v-bar
class="el1"
>
任何人都可以让我知道你们是否能够为 Vuetify 制作任何自定义滚动条? 谢谢<</p>
https://codepen.io/anon/pen/gBMjBM
变化:
- 将"V-list"(导致溢出的元素(包装到 V 形元素中
- 从库列表中删除了 Vue
- CSS 中的一行
.css:
.vuebar-element {
height: 100%;
我直接修改源代码。
在路径下:
node_modules\vuetify\src\components\VNavigationDrawer
//directly modify the scrollbar style you want.
.v-navigation-drawer__content
height: 100%
overflow-y: auto
overflow-x: hidden !important
&::-webkit-scrollbar
width: 1px
&::-webkit-scrollbar-thumb
background: black
border-radius: 20px
<</div>
div class="one_answers"> 老实说,不要给自己压力。只需仅使用CSS,让自己休息
查看小提琴 https://jsfiddle.net/L3d2tspy/
<style>
/* width */
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #ff2929;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgb(255, 219, 219);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>