纯css美化滚动条样式

自己完善自己博客再Ipad等移动端的菜单时选用了左右滑动的菜单模式！当然就会使用到滚动条了，而默认的滚动条有多丑大家清楚吧！就搜到了纯CSS美化滚动条样式的方法！

webkit内核浏览器

Webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式。当然，兼容所有浏览器的滚动条样式目前是不存在的。

• 可选项

::-webkit-scrollbar&＃160;滚动条整体部分::-webkit-scrollbar-thumb&＃160;滚动条里面的小方块，能上下左右移动(取决于是垂直还是水平)::-webkit-scrollbar-track&＃160;滚动条的轨道(里面装有thumb)::-webkit-scrollbar-button&＃160;滚动条轨道两端的按钮，允许通过点击微调小方块的位置::-webkit-scrollbar-track-piece&＃160;内层轨道，滚动条中间部分(除去)::-webkit-scrollbar-corner&＃160;边角，及两个滚动条的交汇处::-webkit-resizer&＃160;两个滚动条的交汇处上用于拖动调整元素大小的小控件

• 改变浏览器默认的滚动条样式：

::-webkit-scrollbar-track-piece&＃160;{&＃160;//滚动条凹槽的颜色，还可以设置边框属性background-color:#f8f8f8;}::-webkit-scrollbar&＃160;{//滚动条的宽度width:9px;height:9px;}::-webkit-scrollbar-thumb&＃160;{//滚动条的设置background-color:#dddddd;background-clip:padding-box;min-height:28px;}::-webkit-scrollbar-thumb:hover&＃160;{background-color:#bbb;}

• 给特定的div模块修改滚动条的样式,比如我们给class名为emperinter的添加滚动条样式:

.emperinter::-webkit-scrollbar&＃160;{
&＃160;width:&＃160;8px;}
&＃160;.emperinter::-webkit-scrollbar-track&＃160;{
&＃160;background-color:red;
&＃160;-webkit-border-radius:&＃160;2em;
&＃160;-moz-border-radius:&＃160;2em;
&＃160;border-radius:2em;}
&＃160;.emperinter::-webkit-scrollbar-thumb&＃160;{
&＃160;background-color:green;
&＃160;-webkit-border-radius:&＃160;2em;
&＃160;-moz-border-radius:&＃160;2em;
&＃160;border-radius:2em;}

IE浏览器

scrollbar-arrow-color:&＃160;#f4ae21;&＃160;/**//*三角箭头的颜色*/&＃160;&＃160;&＃160;scrollbar-face-color:&＃160;#333;&＃160;/**//*立体滚动条的颜色*/&＃160;&＃160;&＃160;scrollbar-3dlight-color:&＃160;#666;&＃160;/**//*立体滚动条亮边的颜色*/&＃160;&＃160;&＃160;scrollbar-highlight-color:&＃160;#666;&＃160;/**//*滚动条空白部分的颜色*/&＃160;&＃160;&＃160;scrollbar-shadow-color:&＃160;#999;&＃160;/**//*立体滚动条阴影的颜色*/&＃160;&＃160;&＃160;scrollbar-darkshadow-color:&＃160;#666;&＃160;/**//*立体滚动条强阴影的颜色*/&＃160;&＃160;&＃160;scrollbar-track-color:&＃160;#666;&＃160;/**//*立体滚动条背景颜色*/&＃160;&＃160;&＃160;scrollbar-base-color:#f8f8f8;&＃160;/**//*滚动条的基本颜色*/

Firefox

这个貌似原生提供的很少，只找到两个属性！比较难啃，有纯CSS实现的方法麻烦留言。我找到的属性具体可以参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scrollbars

• scrollbar-color

• scrollbar-width

• 例子

&＃160;&＃160;
&＃160;&＃160;&＃160;&＃160;
&＃160;&＃160;&＃160;&＃160;
&＃160;&＃160;&＃160;&＃160;
&＃160;&＃160;&＃160;&＃160;favicon2.ico"&＃160;/>
&＃160;&＃160;&＃160;&＃160;滚动条样式title>
&＃160;&＃160;&＃160;&＃160;
.scroller&＃160;{
&＃160;&＃160;width:&＃160;100%;
&＃160;&＃160;height:&＃160;500px;
&＃160;&＃160;overflow-y:&＃160;scroll;
&＃160;&＃160;scrollbar-color:&＃160;rebeccapurple&＃160;green;
&＃160;&＃160;scrollbar-width:&＃160;thin;
}
.content{
font-size:38px;
color:&＃160;chocolate;
margin-left:&＃160;50px;
margin-right:&＃160;50px;
padding:&＃160;20px;
background-color:&＃160;aliceblue;
}
&＃160;&＃160;&＃160;&＃160;style>


&＃160;&＃160;head>
&＃160;&＃160;
&＃160;&＃160;&＃160;
&＃160;&＃160;&＃160;
&＃160;&＃160;&＃160;
&＃160;&＃160;&＃160;Veggies&＃160;es&＃160;bonus&＃160;vobis,&＃160;proinde&＃160;vos&＃160;postulo&＃160;essum&＃160;magis&＃160;kohlrabi
&＃160;&＃160;&＃160;welsh&＃160;onion&＃160;daikon&＃160;amaranth&＃160;tatsoi&＃160;tomatillo&＃160;melon&＃160;azuki&＃160;bean&＃160;garlic.
&＃160;&＃160;&＃160;Gumbo&＃160;beet&＃160;greens&＃160;corn&＃160;soko&＃160;endive&＃160;gumbo&＃160;gourd.&＃160;Parsley&＃160;shallot&＃160;courgette
&＃160;&＃160;&＃160;tatsoi&＃160;pea&＃160;sprouts&＃160;fava&＃160;bean&＃160;collard&＃160;greens&＃160;dandelion&＃160;okra&＃160;wakame&＃160;tomato.
&＃160;&＃160;&＃160;Dandelion&＃160;cucumber&＃160;earthnut&＃160;pea&＃160;peanut&＃160;soko&＃160;zucchini.
&＃160;&＃160;&＃160;Python3&＃160;简介
&＃160;&＃160;&＃160;
&＃160;&＃160;&＃160;Python&＃160;是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。
&＃160;&＃160;&＃160;
&＃160;&＃160;&＃160;Python&＃160;的设计具有很强的可读性，相比其他语言经常使用英文关键字，其他语言的一些标点符号，它具有比其他语言更有特色语法结构。
&＃160;&＃160;&＃160;
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;Python&＃160;是一种解释型语言：&＃160;这意味着开发过程中没有了编译这个环节。类似于PHP和Perl语言。
&＃160;&＃160;&＃160;
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;Python&＃160;是交互式语言：&＃160;这意味着，您可以在一个&＃160;Python&＃160;提示符&＃160;>>>&＃160;后直接执行代码。
&＃160;&＃160;&＃160;
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;Python&＃160;是面向对象语言:&＃160;这意味着Python支持面向对象的风格或代码封装在对象的编程技术。
&＃160;&＃160;&＃160;
&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;Python&＃160;是初学者的语言：Python&＃160;对初级程序员而言，是一种伟大的语言，它支持广泛的应用程序开发，从简单的文字处理到&＃160;WWW&＃160;浏览器再到游戏。 &＃160;&＃160;&＃160;
&＃160;&＃160;&＃160;div>
&＃160;&＃160;&＃160;div>
&＃160;&＃160;body>html>