怎么用css设置滚动条

写后台项目,侧边栏和内容主体部分单独有自己的滚动区域--就是自己在自己的区域玩

所以需要给侧边栏和内容主体添加自己的滚动条

需要一个外层盒子,滚动条才能根据内容滚动

<div class="scrollbox">
内容部分
</div>

//用的less写的
<style>
.scrollbox {
    height: 100%;
    width: 100%;
    overflow: auto;
    // 滚动条整体部分
    &::-webkit-scrollbar{
        width: 6px;//对垂直方向滚动条
        height: 6px;//对水平方向滚动条
    }
    //滚动的滑块
    &::-webkit-scrollbar-thumb{
    border-radius:3px;
    background-color: #ccc//滚动条的颜色
    }
    //内层滚动槽
    &::-webkit-scrollbar-track-piece{
    background-color:#ccc ;
    }
}
</style>

最后的效果-简易版滚动条

 下面整理了滚动条常会设置的属性-可以收藏哦

 滚动条整体部分 ,设置水平滚动条的高,垂直滚动条的宽..    ::-webkit-scrollbar

滚动的滑块,设置滚动条的颜色,圆角..    ::-webkit-scrollbar-thumb

内层滚动槽,设置滚动条的颜色,宽度..  ::-webkit-scrollbar-track-piece

外层轨道   ::-webkit-scrollbar-track

边角,滚动条的交汇处    ::-webkit-scrollbar-corner

滚动条两端的按钮,允许通过点击微调小方块的位置..    ::-webkit-scrollbar-button

其他的就要自己去发现了~