效果不好，自己改。
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
/* 滚动条样式 实测支持webkit内核浏览器与IE浏览器 火狐无效 */ html { 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); 自定义个性鼠标*/ } /* 针对webkit内核浏览器的样式 */ .dropdown-menu::-webkit-scrollbar { width:10px; height:10px; } .dropdown-menu::-webkit-scrollbar-button { background-color:#FF7677; } .dropdown-menu::-webkit-scrollbar-track { background:#FF66D5; } .dropdown-menu::-webkit-scrollbar-track-piece { background:url(http://www.lyblog.net/wp/wp-content/themes/mine/img/stripes_tiny_08.png); } .dropdown-menu::-webkit-scrollbar-thumb{ background:#FFA711; border-radius:4px; } .dropdown-menu::-webkit-scrollbar-corner { background:#82AFFF; } .dropdown-menu::-webkit-scrollbar-resizer { background:#FF0BEE; } |
另有滚动条插件，没有下载测试。链接 >> 狂点
据说，用法是这个样子的，在PHP100看到的，如下：
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<link rel="stylesheet" href="js/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css"> <script type="text/javascript" src="js/jquery-1.11.1.min.js">script> <script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js">script> <script src="js/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js">script> <script> if (!$.browser.webkit) { $.mCustomScrollbar.defaults.scrollButtons.enable=true; //enable scrolling buttons by default $.mCustomScrollbar.defaults.axis="yx"; //enable 2 axis scrollbars by default $(".container").mCustomScrollbar({theme:"dark"}); } script> |