Tag Archives: CSS滚动条

八 31

CSS滚动条样式，火狐无效

Posted on by

效果不好，自己改。

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>