滚动条优化样式

作者：Jasmine - 2018年11月30日

有些人做网页的时候,做着发觉系统网页的滚动条觉得不够美观,然后就想优化一下,下面是优化的办法:

css添加样式:

/** 滚动条 **/
::-webkit-scrollbar { width: 6px; height: 10px; }
::-webkit-scrollbar-button:vertical { display: none; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background-color: #e2e2e2; }
::-webkit-scrollbar-thumb { border-radius: 10px; background-color: rgba(0, 0, 0, .3); }
::-webkit-scrollbar-thumb:vertical:hover { background-color: rgba(0, 0, 0, .35); }
::-webkit-scrollbar-thumb:vertical:active { background-color: rgba(0, 0, 0, .38); }

把上面这段代码添加进去就可以了.美化之后的效果如下图显示,可根据自己的需求自行修改颜色尺寸之类的.

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/616

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！