前言在CSS中，如果我们在块级容器上设置属性：overflow:scroll/*x和y方向*/oroverflow-x:scroll/*onlyxdirection*/oroverflow-y:scroll/*justtheydirection*/当块级内容区域超出块级元素的范围时，将以滚动条的形式显示。可以滚动里面的内容，里面的内容不会超出块级区域的范围。有时候我们需要自定义滚动条的样式，比如在开头显示，比如改变滚动条的颜色，设置轨道的样式等等，那么这篇文章就是为你准备的。两个字符1.认识滚动条将滚动条设置为CSS伪元素，对应上图中的数字：::-webkit-scrollbar{/*1*/}::-webkit-scrollbar-button{/*2*/}::-webkit-scrollbar-track{/*3*/}::-webkit-scrollbar-track-piece{/*4*/}::-webkit-scrollbar-thumb{/*5*/}::-webkit-scrollbar-corner{/*6*/}::-webkit-resizer{/*7*/}属性介绍：::-webkit-scrollbar//整个滚动条部分::-webkit-scrollbar-button//滚动条两端的按钮::-webkit-scrollbar-track//外轨::-webkit-scrollbar-track-piece//内轨，滚动条的中间部分（去掉)::-webkit-scrollbar-thumb//滚动条中可以拖动的那个::-webkit-scrollbar-corner//角::-webkit-resizer///定义拖动块的样式在右下角2.设置样式demo进入页面，打开控制台工具，选择其中一种样式，可以看到该样式的CSS源码。/*定义滚动条的高度和宽度以及水平和垂直滚动条尺寸对应的背景高度和宽度*/::-webkit-scrollbar{width:16px;高度：16px；background-color:#F5F5F5;}/*定义滚动条轨道阴影+圆角*/::-webkit-scrollbar-track{-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);边框半径：10px；背景色：#F5F5F5；}/*定义滑块内阴影+圆角*/::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset006pxrgba(0,0,0,.3);background-color:#555;}可以设置任何对象：边框、阴影、背景图片等，创建的滚动条仍然会根据操作系统自身的设置完成其交互行为。以下伪类可以应用于上述伪元素。:horizo??ntal//适用于任意水平方向的滚动条:vertical//适用于任意垂直方向的滚动条:decrement//适用于按钮和轨道片段。表示递减按钮或轨道片段，例如可以将区域向上或向右移动的区域和按钮：增量//适用于按钮和轨道片段。表示增量按钮或轨道碎片，例如区域和可以将区域向下或向左移动的按钮：start//适用于按钮和轨道碎片。指示对象（按钮轨道片段）是否放置在滑块前面：end//适用于按钮和轨道片段。指示对象（按钮轨道片段）是否放置在滑块后面：double-button//适用于按钮和轨道片段。确定轨道是否在一对按钮处结束。也就是说，轨道碎片紧挨着一对在一起的按钮。:single-button//适用于按钮和轨道片段。判断轨道结束的位置是否为按钮。也就是说，轨道碎片在一个按钮旁边。:no-button//表示轨道结束时没有按钮。:corner-present//表示滚动条的角是否存在。:window-inactive//适用于所有滚动条，表示包含滚动条的区域，当焦点不在窗口上时。使用示例::-webkit-scrollbar-track-piece:start{/*选择上半部分（或左半部分）或单独的滚动条轨道*/}::-webkit-scrollbar-thumb:window-inactive{/*选择当浏览器窗口未处于焦点时滚动拇指*/}::-webkit-scrollbar-button:horizo??ntal:decrement:hover{/*当鼠标悬停时选择向下或向左滚动按钮*/}3.IE浏览器兼容IE的参考链接：https://www.cnblogs.com/koley...三PostscriptChrome可以很好的支持自定义滚动条，其他浏览器都不同程度支持自定义滚动条样式。参考文章：http://blog.csdn.net/cysear/a...
