CSS网页滚动条

效果：

不多说，上代码

CSS部分

/*滚动条样式*/
.table_p{overflow-x: auto; overflow-y: auto; width:100%;}
.table_p::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 1px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
    background: #081832;
}
.table_p::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow   : inset 0 0 5px #072951;
    background   : #61d2f7;
    /*background   : #61d2f7;*/
}
.table_p::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px #034c6a ;
    border-radius: 10px;
    background   : #072951;
}

HTML部分

<div class="table_p">
   <div style='width:2000px;height:100px'><div>
</div>

 

1. ::-webkit-scrollbar 滚动条整体部分，其中的属性: width,height,background,border等。
2. ::-webkit-scrollbar-button 滚动条两端的按钮，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
3. ::-webkit-scrollbar-track 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
4. ::-webkit-scrollbar-track-piece 内层滚动槽/轨道，需要注意的就是它会覆盖第三个属性的样式。
5. ::-webkit-scrollbar-thumb 滚动的滑块
6. ::-webkit-scrollbar-corner 边角，两个滚动条交汇处
7. ::-webkit-resizer 定义右下角拖动块的样式/两个滚动条交汇处用于拖动调整元素大小的小控件（基本用不上）