在修改滚动条样式时,两个类名,一个地方生效,另一个地方不生效。
捣鼓很久才发现,原来横轴要设置 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
对应纵向滚动条。