如何解决v-data-table 上的自定义滚动条
我尝试更改 v-data-table (vuetify) 的样式。此代码更改所有位置的滚动(浏览器也滚动)。
<style>
::-webkit-scrollbar {
width: 24px;
height: 8px;
background-color: #143861;
}
</style>
如何更改特定元素的滚动样式?这些解决方案不起作用:
<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>
解决方法
您需要定位可滚动的 v-data-table
内部元素:
.element .v-data-table__wrapper::-webkit-scrollbar {
width: 24px;
height: 8px;
background-color: #143861;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。