调节滚动条css样式 两栏布局适用

.ant-layout-sider-children 是需要调节的容器选择器。

.ant-layout-sider-children {
overflow-y: auto;
}

.ant-layout-sider-children::-webkit-scrollbar {
width: 10px;
}

.ant-layout-sider-children::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .05);
border-radius: 10px;
box-shadow: inset1px1px0rgba(0, 0, 0, .1);
}

.ant-layout-sider-children:hover::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .2);
border-radius: 10px;
box-shadow: inset1px1px0rgba(0, 0, 0, .1);
}

/鼠标悬浮在滑块上时滑块的样式/
.ant-layout-sider-children::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, .4);
box-shadow: inset1px1px0rgba(0, 0, 0, .1);
}

/正常时候的主干部分/
.ant-layout-sider-children::-webkit-scrollbar-track {
border-radius: 10px;
box-shadow: inset006pxrgba(0, 0, 0, 0);
background-color: white;
}

/鼠标悬浮在滚动条上的主干部分/
.ant-layout-sider-children::-webkit-scrollbar-track:hover {
box-shadow: inset006pxrgba(0, 0, 0, .4);
background-color: rgba(194, 194, 194 );
}