更改overflow:auto的原生滚动条样式

当给一个容器设置height和overflow:auto之后，如果子元素的高度超出父容器height时，就会出现滚动条；
默认的滚动条的样式是这样的：

使用下面的代码可以修改滚动条的默认样式：

/* 修改滚动条的样式 */
::-webkit-scrollbar {
    /* 设置滚动条的宽度：如果设置为0就是隐藏滚动条但是滚动效果还在非常完美 */
	width: 4px !important;
}
 
/* 滚动条的轨道 */
::-webkit-scrollbar-track {
    /* 设置滚动条轨道的背景色 */
    background-color: #f1f1f1;
}
 
/* 滚动条的轨道的hover颜色 */
::-webkit-scrollbar-track:hover {
    background-color: #eaeaea;
}
 
/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
    /* 设置滚动条滑块的背景色 */
    background-color: #888;
    border-radius: 8px;
}
 
/* 鼠标悬停在滚动条上的样式 */
/* 设置鼠标悬停时滚动条滑块的背景色 */
::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}
 
/* 滚动条的滑块在非激活状态下的样式（滑块未被点击或拖动） */
::-webkit-scrollbar-thumb:inactive {
    background-color: #ccc;
}
 
/* 滚动条的按钮（上下按钮） */
::-webkit-scrollbar-button {
    display: none;
}
 
/* 滚动条的角落（轨道和滑块交汇的部分） */
::-webkit-scrollbar-corner {
    background-color: #f1f1f1;
}