css 设置 浏览器滚动条样式

效果如下：

管他三七二十一，直接把下面样式导入即可

::-webkit-scrollbar {
    height: 8px;
    width: 8px;
    background: rgba(222, 222, 222, 0.5);
    transition: all 0.3s ease-in-out;
    border-radius: 5px;
}
  
::-webkit-scrollbar-button {
    display: none;
}

::-webkit-scrollbar-track {
    background-color: #fff;
}

::-webkit-scrollbar-track-piece {
    background: #fff;
}
//貌似要有下面这个，否则谷歌浏览器不会有滚动条出现
::-webkit-scrollbar-thumb {
    width: 8px;
    min-height: 15px;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.6);
}

::-webkit-scrollbar-thumb:active {
    background: rgba(0, 0, 0, 0.8);
}