html 滚动条_数十种自定义多彩多样滚动条样式

前端 0 28
知识社区小编
知识社区小编 7月21日 21:42 发表
摘要:pc端开发过程中有没有遇到过因为原生滚动条的样式问题,让整个项目事倍功半;有没有遇到过因为因为默认滚动条的缘故,被客户说页面做得真chou,一条毁所有呀。

pc端开发过程中有没有遇到过因为原生滚动条的样式问题,让整个项目事倍功半;有没有遇到过因为因为默认滚动条的缘故,被客户说页面做得真chou,一条毁所有呀。

接下来,下面你看到的,就是完美解决方案!当然,有这么多,不限制于这么多,随意修改,百花盛开。

73b13086462317a148b7b37c326cd84c.png
5efe9a0c7746b90a88f7049c7f0b2473.gif

Demo1

9e322726c9adbedbfc1165f613d8f893.gif

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

2f4206231550e40e4ca23b74f7d385b0.gif

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

5cceffe0f3bc6414be10ab333d7bc7e6.gif

css源码

.srcoll_three::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); background-color: #F5F5F5; border-radius: 10px;}.srcoll_three::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}.srcoll_three::-webkit-scrollbar-thumb{ border-radius: 10px; background-color: #FFF; background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4D9C41), to(#19911D), color-stop(.6,#54DE5D))}

html源码

Demo4

5a52883bcdad9d98b824b5af9071a77d.gif

css源码

.srcoll_four::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5;}.srcoll_four::-webkit-scrollbar{ width: 12px; background-color: #F5F5F5;}.srcoll_four::-webkit-scrollbar-thumb{ border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #D62929;}

html源码

Demo5

98d2d55e5c81553cd6e94f58d54a553e.gif

css源码

.srcoll_five::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}.srcoll_five::-webkit-scrollbar{ width: 6px; background-color: #F5F5F5;}.srcoll_five::-webkit-scrollbar-thumb{background-color: #000000;}

html源码

Demo6

99d0884b4daec803376101ef6afc8c28.gif

css源码

.srcoll_six::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}.srcoll_six::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}.srcoll_six::-webkit-scrollbar-thumb{ background-color: #000000; border: 2px solid #555555;}

html源码

Demo7

b8340e2586a218c36e7768782e5e1e1e.gif

css源码

.srcoll_seven::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}.srcoll_seven::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}.srcoll_seven::-webkit-scrollbar-thumb{ background-color: #0ae; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));}

html源码

Demo8

9decbd3c7e5a647f56e16d728a732258.gif

css源码

.srcoll_eight::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}.srcoll_eight::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}.srcoll_eight::-webkit-scrollbar-thumb{ background-color: #F90; background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)}

html源码

Demo9

a351c34a8435e9f3132885bf313b4ea9.gif

css源码

.srcoll_nine::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; border-radius: 10px;}.srcoll_nine::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}.srcoll_nine::-webkit-scrollbar-thumb{ border-radius: 10px; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122,153,217)), color-stop(0.72, rgb(73,125,189)), color-stop(0.86, rgb(28,58,148)));}

html源码

Demo10

02c97a79dbc35ca8da7aa2ee947d9de2.gif

css源码

.srcoll_ten::-webkit-scrollbar-track{ border: 1px solid black; background-color: #F5F5F5;}.srcoll_ten::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}.srcoll_ten::-webkit-scrollbar-thumb{background-color: #000000;}

html源码

 

Demo11

1a7964038f0227dd0b2927fd416126d5.gif

css源码

.srcoll_eleven::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}.srcoll_eleven::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}.srcoll_eleven::-webkit-scrollbar-thumb{ background-color: #F90; background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)}

html源码

Demo12

6810fedd45235571b922053e0b19645a.gif

css源码

.srcoll_twelve::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; border-radius: 10px;}.srcoll_twelve::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}.srcoll_twelve::-webkit-scrollbar-thumb{ background-color: #AAA; border-radius: 10px; background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, .2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .2) 75%, transparent 75%, transparent)}

html源码

Demo13

4273c51262b96928851c115193f0732d.gif

css源码

.srcoll_thirteen::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; border-radius: 10px;}.srcoll_thirteen::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5;}.srcoll_thirteen::-webkit-scrollbar-thumb{ background-color: #3366FF; border-radius: 10px; background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent)}

html源码

Demo14

3c15dfdd14427ab58e34dc3aadacb90e.gif

css源码

.srcoll_fourteen::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9); border-radius: 10px; background-color: #444444;}.srcoll_fourteen::-webkit-scrollbar{ width: 12px; background-color: #F5F5F5;}.srcoll_fourteen::-webkit-scrollbar-thumb{ border-radius: 10px; background-color: #D62929; background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent)}

html源码

a8e20fa3f41575ea386de9d3cf1e2dfe.gif
ce7ed94eae8defdbcc745cbf670922ab.gif
1d2d1a942b34650b4efdcdc6e4ae8a98.gif

搬你想搬,盖你所需,码字不易,且行且珍惜!

点赞 0 收藏(0)    分享
相关标签: html 滚动条
0个评论
  • 消灭零评论