css设置滚动条样式

首先给父盒子设置

 overflow: hidden;
 overflow-y: scroll;
 overflow-x: scroll;

这样子盒子超出父级的高度和宽度时就会 出现滚动条

接着调整滚动条样式

/*里面的代码可以根据自己需求去进行更改*/
/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width: 12px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0, 0, 0, 0.1);
}

后续可根据自己需求进行调整