自定义滚动条样式-兼容IE
滚动条样式设置
html部分：
1 <div id="scroll" style="width: 500px; height: 300px; border: 2px solid #1F1F1F; margin: 20px auto; overflow: auto; "> 2 <div style="margin:0 auto;;height:800px;border:1px solid #ddd;width:400px;">内容部分内容部分</div> 3 </div>
废话不多说，直接上；
IE专属的滚动条样式定义，只能设置各种原始结构的颜色，宽高结构等其他样式无法修改；
1 #scroll{ 2 width: 1830px; 3 height: 750px; 4 overflow-y: scroll; 5 /* IE滚动条设置，仅支持颜色修改 */ 6 /* 立体滚动条的颜色（包括箭头部分的背景色） */ 7 scrollbar-face-color: #2c9ef7; 8 /*三角箭头的颜色*/ 9 scrollbar-arrow-color: #ffffff; 10 /* 立体滚动条亮边的颜色 */ 11 /* scrollbar-3dlight-color: #2c9ef7; */ 12 /* 滚动条的高亮颜色（左阴影？） */ 13 /* scrollbar-highlight-color: #2c9ef7; */ 14 /* 立体滚动条阴影的颜色 */ 15 scrollbar-shadow-color: #2c9ef7; 16 /* 立体滚动条外阴影的颜色 */ 17 /* scrollbar-darkshadow-color: #2c9ef7; */ 18 /* 立体滚动条背景颜色 */ 19 /* scrollbar-track-color: #2c9ef7; */ 20 /* 滚动条的基色 */ 21 /* scrollbar-base-color: #2c9ef7; */ 22 }
webkit内核浏览器的滚动条样式美化：
1 #scroll div { 2 width:400px; 3 height:400px; 4 } 5 #scroll::-webkit-scrollbar { 6 /* ::-webkit-scrollbar 滚动条整体部分，*/ 7 /* 其中的属性有width,height,background,border（就和一个块级元素一样）等。 */ 8 width:60px; 9 height:10px; 10 } 11 #scroll::-webkit-scrollbar-button{ 12 /* ::-webkit-scrollbar-button 滚动条两端的按钮。*/ 13 /* 可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果. */ 14 background-color:black; 15 } 16 #scroll::-webkit-scrollbar-track{ 17 /* ::-webkit-scrollbar-track 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。 */ 18 background:blue; 19 display: none; 20 } 21 #scroll::-webkit-scrollbar-track-piece { 22 /* ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分。 */ 23 background:green; 24 } 25 #scroll::-webkit-scrollbar-thumb{ 26 /* ::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分,即滚动条。 */ 27 background:pink; 28 border-radius:200px; 29 } 30 #scroll::-webkit-scrollbar-corner { 31 /* ::-webkit-scrollbar-corner 边角. */ 32 background:#ddd; 33 } 34 #scroll::-webkit-scrollbar-resizer { 35 /* ::-webkit-resizer 定义右下角拖动块的样式. */ 36 background:red; 37 }
