100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > el-table设置表格滚动条样式

el-table设置表格滚动条样式

时间:2022-10-04 03:29:14

相关推荐

el-table设置表格滚动条样式

1、局部滚动条样式:

// 滚动条的宽度

/deep/ .el-table__body-wrapper::-webkit-scrollbar {

width: 6px; // 横向滚动条

height: 6px; // 纵向滚动条 必写

}

// 滚动条的滑块

/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {

background-color: #ddd;

border-radius: 3px;

}

2、全局滚动条样式:

//滚动条的宽度

::-webkit-scrollbar {

width: 8px;

height: 8px;

background-color: #e4e4e4;

border-radius: 6px;

}

//滚动条的滑块

::-webkit-scrollbar-thumb {

background-color: #a1a3a9;

border-radius: 6px;

}

滚动条样式存在兼容性问题,以上的样式是在webkit浏览器下可生效的

3、修改滚动条样式

.treeScrollbar::-webkit-scrollbar-track-piece {

//滚动条凹槽的颜色,还可以设置边框属性

background-color: #f1f1f1;

}

.treeScrollbar::-webkit-scrollbar {

//滚动条的宽度

width: 10px;

height: 10px;

}

.treeScrollbar::-webkit-scrollbar-thumb {

//滚动条的设置

background-color: #c1c1c1;

background-clip: padding-box;

min-height: 28px;

border-radius: 8px;

}

.treeScrollbar::-webkit-scrollbar-thumb:hover {

background-color: #a8a8a8;

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。