Bootstrap

使用css优化页面横向/纵向滚动条样式

优化后:

 仅设置纵向

<style lang="less" scoped>

/* 改变滚动条的颜色 */
* {
    scrollbar-width: thin;
    scrollbar-color: #999 #F5F5F5;
}
*::-webkit-scrollbar {
    background-color: #F5F5F5;
    width: 10px;
}
*::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 5px;
}

/* 改变滚动条被悬停时的颜色 */
*::-webkit-scrollbar-thumb:hover {
    background-color: #666;
}

/* 改变滚动条的轨道宽度和颜色 */
*::-webkit-scrollbar-track {
    background-color: #F5F5F5;
    border-radius: 5px;
}

</style>

仅设置横向

<style  lang="less" scoped>

/deep/ .el-table--scrollable-x .el-table__body-wrapper {
  overflow-x: scroll;
}
/deep/.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar{
    background-color: #F5F5F5;
    height: 10px;
    width: 5px;
} 

/deep/.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb{
  background-color: #b3c0d1;
  height: 11px;
    border-radius: 15px;
}

</style>

如果横向纵向都要添加,那么,两个都复制即可。less要不要无所谓,要了就是仅在当前页面生效。 

;