自定义滚动条样式不生效:横轴设置 height,纵轴设置 width
问题
在修改滚动条样式时,两个类名,一个地方生效,另一个地方不生效。
解决办法
捣鼓很久才发现,原来横轴要设置 height
,纵轴要设置 width
。
// 滚动条的样式,高宽分别对应横竖滚动条的尺寸
::v-deep .lib-table::-webkit-scrollbar, ::v-deep .pagination-container::-webkit-scrollbar {
width: 5px; // 纵向滚动条的粗度
height: 5px; // // 横向滚动条的粗度
padding-right: 30px;
}
// 滚动条里默认的小方块,自定义样式
::v-deep .lib-table::-webkit-scrollbar-thumb, ::v-deep .pagination-container::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 2px;
}
// 滚动条里的轨道
::v-deep .lib-table::-webkit-scrollbar-track, ::v-deep .pagination-container::-webkit-scrollbar-track {
background: transparent;
}
设置显示滚动条
- 父盒子设置
overflow: auto
,表示若内容超过父盒子大小,则显示滚动条; overflow-x:auto
对应横向滚动条,overflow-y:auto
对应纵向滚动条。
本文来自博客园,作者:shayloyuki,转载请注明原文链接:https://www.cnblogs.com/shayloyuki/p/16624261.html
posted on 2022-08-25 14:52 shayloyuki 阅读(1740) 评论(0) 编辑 收藏 举报