/* 修改浏览器默认滚动条样式 */ body{ scrollbar-arrow-color: transparent!important; /*上下按钮上三角箭头的颜色*/ scrollbar-face-color: transparent!important; /*滚动条凸出部分的颜色*/ scrollbar-3dlight-color: transparent!important; /*滚动条亮边的颜色*/ scrollbar-highlight-color: transparent!important; /*滚动条空白部分的颜色*/ scrollbar-shadow-color: transparent!important; /*滚动条阴影的颜色*/ scrollbar-darkshadow-color: transparent!important; /*滚动条强阴影的颜色*/ scrollbar-track-color: transparent!important; /*滚动条背景颜色*/ scrollbar-base-color: transparent!important; /*滚动条的基本颜色*/ Cursor:url(mouse.cur); /*自定义个性鼠标*/ /*以上2项适用与:body、div、textarea、iframe*/ } ::-webkit-scrollbar { /* 滚动条整体部分 */ 14px; margin-right:2px } /* 滚动条两端的按钮样式 start */ ::-webkit-scrollbar-button { display: block; } ::-webkit-scrollbar-button:horizontal:single-button:start { 14px; background: url(../img/scroll-top.png) no-repeat; cursor: pointer; } ::-webkit-scrollbar-button:horizontal:single-button:end { 14px; background: url(../img/scroll-bottom.png) no-repeat; cursor: pointer; } ::-webkit-scrollbar-button:vertical:single-button:start { 10px; background: url(../img/scroll-top.png) no-repeat; cursor: pointer; } ::-webkit-scrollbar-button:vertical:single-button:end { 10px; background: url(../img/scroll-bottom.png) no-repeat; cursor: pointer; } /* 滚动条两端的按钮 end */ ::-webkit-scrollbar:horizontal { height:10px; margin-bottom:2px } ::-webkit-scrollbar-track { /* 外层轨道 */ border-radius: 10px; } ::-webkit-scrollbar-track-piece { /*内层轨道,滚动条中间部分 */ background-color: transparent!important; border-radius: 10px; } ::-webkit-scrollbar-thumb { /* 滑块 */ 14px; height:30px; border-radius: 5px; background: #005880!important; position:absolute; } ::-webkit-scrollbar-corner { /* 边角 */ 14px; background-color: red; } ::-webkit-scrollbar-thumb:hover { /* 鼠标移入滑块 */ background: #005880; }
效果: