您现在的位置: 365建站网 > 365学习 > html中div滚动条样式的设置方法

html中div滚动条样式的设置方法

文章来源:365jz.com     点击数:400    更新时间:2018-01-06 11:03   参与评论

自定义IE浏览器滚动条样式

追溯浏览器对滚动条的自定义,恐怕最早的就是IE浏览器了(好像最开始支持的版本是IE5.5)。下面列出了多个版本的支持性况:

滚动条样式 支持情况 支持浏览器版本 可否继承 描述
scrollbar-3dlight-color IE特有属性 IE5.5+ y 设置滚动框的和滚动条箭头左上边缘的颜色
scrollbar-highlight-color IE特有属性 IE5.5+ y 设置滚动框的和滚动条箭头左上边缘的颜色
scrollbar-face-color IE特有属性 IE5.5+ y 设置滚动框和滚动条箭头的颜色
scrollbar-arrow-color IE特有属性 IE5.5+ y 设置滚动条箭头的颜色
scrollbar-shadow-color IE特有属性 IE5.5+ y 设置滚动框的和滚动条箭头右下边缘的颜色
scrollbar-dark-shadow-color IE特有属性 IE5.5+ y 设置滚动条槽的颜色
scrollbar-base-color IE特有属性 IE5.5+ y 设置滚动条主要构成部分的颜色
scrollbar-track-color IE特有属性 IE5.5+ y 设置滚动条轨迹组成部分的颜色

 

自定义FireFox浏览器滚动条

在网上找了很多关于Firfox自定义浏览器滚动条的方法,发现firefox中却实是不支持的。发现了几篇说可以更改,自已也跟着代码写了几次(不知是我错了还是。。。),发现却是不起作用。以下是一点小的收获:

@-moz-document url-prefix(http://),url-prefix(https://) {  
    /* 滚动条颜色 */ 
    scrollbar {  
       -moz-appearance: none !important;  
       background: rgb(0,255,0) !important;  
    }  
    /* 滚动条按钮颜色 */ 
    thumb,scrollbarbutton {  
       -moz-appearance: none !important;  
       background-color: rgb(0,0,255) !important;  
    }  
    /* 鼠标悬停时按钮颜色 */ 
     
    thumb:hover,scrollbarbutton:hover {  
       -moz-appearance: none !important;  
       background-color: rgb(255,0,0) !important;  
    }  
    /* 隐藏上下箭头 */ 
    scrollbarbutton {  
       display: none !important;  
    }  
    /* 纵向滚动条宽度 */ 
    scrollbar[orient="vertical"] {  
      min-width: 15px !important;  
    }  
}



 

 

 

 

 

 

1
2
3
<div class="test test-1">
        <div class="scrollbar"></div>
</div>

 

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
.test{
    width50px;
    height200px;
    overflowauto;
    floatleft;
    margin5px;
    bordernone;
}
.scrollbar{
    width30px;
    height300px;
    margin0 auto;
 
}
.test-1::-webkit-scrollbar {/*滚动条整体样式*/
        width10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height1px;
    }
.test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background#535353;
    }
.test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background#EDEDED;
    }
  效果如下如:

 

 

如果要改变滚动条的宽度:在::-webkit-scrollbar中改变即可;如果要改变滚动条滑块的圆角,在::-webkit-scrollbar-thumb 中改变;如果要改轨道的圆角在::-webkit-scrollbar-track中改变;

 

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.test-5::-webkit-scrollbar {/*滚动条整体样式*/
    width10px;     /*高宽分别对应横竖滚动条的尺寸*/
    height1px;
}
.test-5::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
background-color#F90;
background-image: -webkit-linear-gradient(45deg, rgba(255255255, .225%transparent 25%transparent 50%, rgba(255255255, .250%, rgba(255255255, .275%transparent 75%transparent);
    }
.test-5::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        /*border-radius: 10px;*/
        background#EDEDED;
    }

 

1
2
3
<div class="test test-5">
    <div class="scrollbar"></div>
</div>

 效果如下:

 

以上就可以做出自己喜欢的滚动条了;

 

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (400人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------