若问生涯原是梦,除梦里,没人知。

自定义滚动条样式

css

其中的一中方案是使用jQuery插件,jquery-custom-content-scroller。使用插件的好处是显而易见的,但是坏处也多得去了。要是您想了解jQuery-custom-content-scroller的具体使用方法,请移步到:http://manos.malihu.gr/jquery-custom-content-scroller/

##webkit内核浏览器 /* 设置滚动条的样式 / ::-webkit-scrollbar { height: 10px; width: 10px; } / 滚动槽 / ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); } / 滚动条滑块 / ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); border-radius: 10px; } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); } ##IE浏览器 scrollbar-arrow-color: #f4ae21; /图6,三角箭头的颜色/ scrollbar-face-color: #333; /图5,立体滚动条的颜色/ scrollbar-3dlight-color: #666; /图1,立体滚动条亮边的颜色/ scrollbar-highlight-color: #666; /图2,滚动条空白部分的颜色/ scrollbar-shadow-color: #999; /图3,立体滚动条阴影的颜色/ scrollbar-darkshadow-color: #666; /图4,立体滚动条强阴影的颜色/ scrollbar-track-color: #666; /图7,立体滚动条背景颜色/ scrollbar-base-color:#f8f8f8; /滚动条的基本颜色/ Cursor:url(mouse.cur); /自定义个性鼠标*/ [1]: /scroller (自定义滚动条样式)

目录[+]