css3实现自定义滚动条样式详解

在写页面的时候有时候滚动条的样式与页面风格不统一这时候就用到了自定义滚动条

1、首先弄清楚页面的滚动条分为哪些部分，在写的时候分为几块

定义滚动条的时候先进行宏观定义，定义滚动条，然后定义滑块，然后定义滑块的轨道，总之很简单，结构如下

::-webkit-scrollbar   定义了滚动条整体的样式；::-webkit-scrollbar-thumb  滑块部分；::-webkit-scrollbar-thumb  轨道部分；

一开始不想要显示的时候可以定义overflow=auto,这样只有需要滚动条的时候才会展示，代码如下

.overview_alarm_list{
        height: 100%;
        overflow-x: auto;
        border: none;
    }
    /*定义滚动条的整体样式使其变窄*/
    .overview_scroll::-webkit-scrollbar{
        width: 4px;
        height: 1px;
    }
    /*定义滚动条的滑块的样式有圆角和阴影以及自定义的背景色*/
    .overview_scroll::-webkit-scrollbar-thumb{
        border-radius: 4px;
        -webkit-box-shadow: inset 0 0 2px #00B47F;
        background: #00B47F;
    }
    /*定义滚动条所在轨道的样式。有圆角和阴影以及淡色系的背景色*/
    .overview_scroll::-webkit-scrollbar-track{
        -webkit-box-shadow: inset 0 0 2px #E6FAF3;
        border-radius: 4px;
        background: #E6FAF3;
    }