pc端开发过程中有没有遇到过因为原生滚动条的样式问题,让整个项目事倍功半;有没有遇到过因为因为默认滚动条的缘故,被客户说页面做得真chou,一条毁所有呀。
接下来,下面你看到的,就是完美解决方案!当然,有这么多,不限制于这么多,随意修改,百花盛开。
Demo1
css源码
.srcoll_one::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5;}.srcoll_one::-webkit-scrollbar{ width: 12px; background-color: #F5F5F5;}.srcoll_one::-webkit-scrollbar-thumb{ border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #4078cb;}
html源码
Demo2
css源码
.srcoll_two::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); background-color: #F5F5F5; border-radius: 10px;}.srcoll_two::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}.srcoll_two::-webkit-scrollbar-thumb{ border-radius: 10px; background-color: #FFF; background-image: -webkit-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);}
html源码
Demo3
css源码
.sr