css美化原生滚动条

我爱模板网在做基于elementUI的项目时，需要美化滚动条，美化滚动条，一般又两个可选插件：
el-scrollbar  这是elementUI自带的滚动条美化插件
vueScroll  这是基于vue的滚动条插件

这两个都是插件，这里不做介绍，其实能用原生的滚动条，就尽量不要用这些插件，他们会添加很多容器和js来实现类似滚动条的效果。这里用css美化原生滚动条来实现类似的效果。将下面的代码放到公共样式中，然后内容超出的容器都overflow-y:auto，即可实现类似于上面的两个插件的效果：

/* 滚动条美化 */
::-webkit-scrollbar {/*滚动条整体样式*/
    width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 0;
}
/*滚动条滑块隐藏*/
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0,0,0,0);
}
/*按下滚动条，颜色加深*/
::-webkit-scrollbar-thumb:active {
    border-radius: 10px;
    background: rgba(0,0,0,.5);
}
/*鼠标浮到容器上，让该容器的滚动条滑块显示*/
:hover::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.2);
}
/*滚动条轨道*/
::-webkit-scrollbar-track {
    border-radius: 10px;
    background: rgba(0,0,0,0);
}

上面代码仅在webkit内核的浏览器有效，如果要兼容性，还是建议使用上面的两个插件。不过现在大部分浏览器都是webkit内核了。

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！