<!DOCTYPE html> <!-- saved from url=(0061)http://www.xuanfengge.com/demo/201311/scroll/css3-scroll.html --> <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS3自定义滚动条-轩枫阁</title> <style> header { font-family: 'Lobster', cursive; text-align: center; font-size: 25px; } #info { font-size: 18px; color: #555; text-align: center; margin-bottom: 25px; } a{ color: #074E8C; } .scrollbar { margin-left: 30px; float: left; height: 300px; width: 65px; background: #F5F5F5; overflow-y: scroll; margin-bottom: 25px; } .force-overflow { min-height: 450px; } #wrapper { text-align: center; width: 500px; margin: auto; } /* * STYLE 1 */ #style-1::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5; } #style-1::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } #style-1::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555; } /* * STYLE 2 */ #style-2::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5; } #style-2::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } #style-2::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #D62929; } /* * STYLE 3 */ #style-3::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; } #style-3::-webkit-scrollbar { width: 6px; background-color: #F5F5F5; } #style-3::-webkit-scrollbar-thumb { background-color: #000000; } /* * STYLE 4 */ #style-4::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; } #style-4::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-4::-webkit-scrollbar-thumb { background-color: #000000; border: 2px solid #555555; } /* * STYLE 5 */ #style-5::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; } #style-5::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-5::-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)); } /* * STYLE 6 */ #style-6::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; } #style-6::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-6::-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) } /* * STYLE 7 */ #style-7::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; border-radius: 10px; } #style-7::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-7::-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))); } /* * STYLE 8 */ #style-8::-webkit-scrollbar-track { border: 1px solid black; background-color: #F5F5F5; } #style-8::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-8::-webkit-scrollbar-thumb { background-color: #000000; } /* * STYLE 9 */ #style-9::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; } #style-9::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-9::-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) } /* * STYLE 10 */ #style-10::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; border-radius: 10px; } #style-10::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-10::-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) } /* * STYLE 11 */ #style-11::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; border-radius: 10px; } #style-11::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-11::-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) } /* * STYLE 12 */ #style-12::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9); border-radius: 10px; background-color: #444444; } #style-12::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } #style-12::-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) } /* * STYLE 13 */ #style-13::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9); border-radius: 10px; background-color: #CCCCCC; } #style-13::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } #style-13::-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) } /* * STYLE 14 */ #style-14::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6); background-color: #CCCCCC; } #style-14::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-14::-webkit-scrollbar-thumb { background-color: #FFF; background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 25%, transparent 100%, rgba(0, 0, 0, 1) 75%, transparent) } /* * STYLE 15 */ #style-15::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); background-color: #F5F5F5; border-radius: 10px; } #style-15::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-15::-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)) } /* * STYLE 16 */ #style-16::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); background-color: #F5F5F5; border-radius: 10px; } #style-16::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-16::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #FFF; background-image: -webkit-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%); } </style> </head> <body> <div id="wrapper"> <div class="scrollbar" id="style-default"> <div class="force-overflow"></div> </div> <div class="scrollbar" id="style-1"> <div class="force-overflow"></div> </div> <div class="scrollbar" id="style-2"> <div class="force-overflow"></div> </div> <div class="scrollbar" id="style-3"> <div class="force-overflow"></div> </div> <div class="scrollbar" id="style-4"> <div class="force-overflow"></div> </div> <div class="scrollbar" id="style-5"> <div class="force-overflow"></div> </div> <div class="scrollbar" id="style-6"> <div class="force-overflow"></div> </div> <div class="scrollbar" id="style-7"> <div class="force-overflow"></div> </div> <div class="scrollbar" id="style-8"> <div class="force-overflow"></div> </div> <div class="scrollbar" id="style-9"> <div class="force-overflow"></div> </div> <div class="scrollbar" id="style-10"> <div class="force-overflow"></div> </div> <div class="scrollbar" id="style-11"> <div class="force-overflow"></div> </div> <div class="scrollbar" id="style-13"> <div class="force-overflow"></div> </div> <div class="scrollbar" id="style-14"> <div class="force-overflow"></div> </div> <div class="scrollbar" id="style-15"> <div class="force-overflow"></div> </div> </div> </body></html>
以上为html示例,下面是简单的示例
当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义。
首先我们要了解滚动条。滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深。
滚动条的css样式主要有三部分组成:
1、::-webkit-scrollbar 定义了滚动条整体的样式;
2、::-webkit-scrollbar-thumb 滑块部分;
3、::-webkit-scrollbar-thumb 轨道部分;
下面以overflow-y:auto;为例(overflow-x:auto同)
html代码:
1
2
3
|
< div class="test test-1"> < div class="scrollbar"></ div > </ div > |
css代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
.test{ width : 50px ; height : 200px ; overflow : auto ; float : left ; margin : 5px ; border : none ; } .scrollbar{ width : 30px ; height : 300px ; margin : 0 auto ; } .test -1: :-webkit-scrollbar { /*滚动条整体样式*/ width : 10px ; /*高宽分别对应横竖滚动条的尺寸*/ height : 1px ; } .test -1: :-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px ; -webkit-box-shadow: inset 0 0 5px rgba( 0 , 0 , 0 , 0.2 ); background : #535353 ; } .test -1: :-webkit-scrollbar-track { /*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba( 0 , 0 , 0 , 0.2 ); border-radius: 10px ; background : #EDEDED ; } |
效果如下如:
如果要改变滚动条的宽度:在::-webkit-scrollbar中改变即可;如果要改变滚动条滑块的圆角,在::-webkit-scrollbar-thumb 中改变;如果要改轨道的圆角在::-webkit-scrollbar-track中改变;
此外,滚动条的滑块不仅可以填充颜色还可以填充图片如下:
css代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.test -5: :-webkit-scrollbar { /*滚动条整体样式*/ width : 10px ; /*高宽分别对应横竖滚动条的尺寸*/ height : 1px ; } .test -5: :-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px ; background-color : #F90 ; background-image : -webkit-linear-gradient( 45 deg, 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 ); } .test -5: :-webkit-scrollbar-track { /*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba( 0 , 0 , 0 , 0.2 ); /*border-radius: 10px;*/ background : #EDEDED ; } |
html代码:
1
2
3
|
< div class="test test-5"> < div class="scrollbar"></ div > </ div > |
效果如下:
以上就可以做出自己喜欢的滚动条了;
如果文档中会有多个滚动条出现,而且希望所有的滚动条样式是一样的,那么伪元素前面不需要加上class、id、标签名等之类的任何东西。