`
IT_hack
  • 浏览: 16390 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

关于scrollbar-face-color只支持ie的解决方法!!

阅读更多
今天突然有人问我滚动条css自定义的方法,我发现用scrollbar-base-color这种方法只有ie支持,查了半天资料总结如下!!!

IE浏览器中自定义滚动条样式:
HTML {  
scrollbar-base-color: #C0C0C0;  
scrollbar-base-color: #C0C0C0;  
scrollbar-3dlight-color: #C0C0C0;  
scrollbar-highlight-color: #C0C0C0;  
scrollbar-track-color: #EBEBEB;  
scrollbar-arrow-color: black;  
scrollbar-shadow-color: #C0C0C0;  
scrollbar-dark-shadow-color: #C0C0C0;  

解释:
介绍一下涉及浏览器滚动条的样式表内容(某些样式需ie5.5+才能支持):
1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)
overflow-x水平方向内容溢出时的设置
overflow-y垂直方向内容溢出时的设置
以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。

2.scrollbar-3d-light-color立体滚动条亮边的颜色(设置滚动条的颜色)
scrollbar-arrow-color上下按钮上三角箭头的颜色
scrollbar-base-color滚动条的基本颜色
scrollbar-dark-shadow-color立体滚动条强阴影的颜色
scrollbar-face-color立体滚动条凸出部分的颜色
scrollbar-highlight-color滚动条空白部分的颜色
scrollbar-shadow-color立体滚动条阴影的颜色

CHROME浏览器中自定义滚动条样式:
::-webkit-scrollbar { width: 3px; height: 3px;}  
::-webkit-scrollbar-track-piece { background-color: #ffffff;}  
::-webkit-scrollbar-thumb{height: 50px; background-color: #666; -webkit-border-radius: 3px;} 
解释:
::-webkit-scrollbar 滚动条宽跟高
::-webkit-scrollbar-track-piece 滚动条样式底部内层样式
::-webkit-scrollbar-thumb 滚动条滑块样式
-webkit-border-radius: 滚动条滑块边角–导圆角

FireFox下自定义滚动条:(或许有些问题,参考http://g.mozest.com/thread-38113-1-1)
@-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;  
}  

FF下用JS实现自定义滚动条:

JS
<script type=“text/javascript” src=“JQUERY-1.1.3.1.js”></script>   
<script type=“text/javascript” src=“jquery.linscroll.js“></script>   
<script type=“text/javascript”>   
$(document).ready(   
function(){   
$(’#scrollContent’).setScroll( //scrollContent为滚动层的ID
{img:scroll_bk.gif’,width:10},//背景图及其宽度   
{img:scroll_arrow_up.gif’,height:3},//up image   
{img:scroll_arrow_down.gif’,height:3},//down image   
{img:scroll_bar.gif’,height:25}//bar image   
);});     
</script> 
HTML
<div id=“scrollContent” style=“width:140px;overflow:hidden;height:170px;”>内容</div> 
分享到:
评论

相关推荐

    CSS如何设置滚动条样式?.docx

    本文将详细介绍如何使用CSS来设置滚动条的样式,主要分为Webkit浏览器(如Chrome、Safari)和Internet Explorer (IE) 的方法。 一、Webkit下的CSS设置 Webkit浏览器支持使用CSS伪元素和伪类来定制滚动条样式。以下...

    css中滚动条样式的设置.pdf

    - `scrollbar-face-color`:设置滚动条3D表面的颜色。 - `scrollbar-arrow-color`:设置滚动条箭头的颜色。 - `scrollbar-shadow-color`:设置滚动条3D界面的暗边颜色。 - `scrollbar-dark-shadow-color`:设置...

    IE滚动条 CSS样式

    对于更复杂的滚动条样式需求,可以借助JavaScript插件,如`Perfect Scrollbar`或`SimpleBar`,它们提供了跨浏览器的滚动条样式解决方案,包括对IE的支持。 总的来说,虽然IE的滚动条样式定制相比其他现代浏览器...

    DIV-CSS-必考题.docx

    问题描述:&lt;style type="text/css"&gt;body { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; ...

    css中滚动条样式的设置.docx

    - `scrollbar-face-color`:设置滚动条3D表面的颜色。 - `scrollbar-arrow-color`:设置滚动条方向箭头的颜色。 - `scrollbar-shadow-color`:设置滚动条3D界面的暗边颜色。 - `scrollbar-dark-shadow-color`:设置...

    html 滚动条在IE6和IE7中兼容性问题

    SCROLLBAR-FACE-COLOR:#74b4e4; SCROLLBAR-DARKSHADOW-COLOR:#FFFFFF; SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF; SCROLLBAR-3DLIGHT-COLOR:#FFFFFF; SCROLLBAR-SHADOW-COLOR:#FFFFFF; SCROLLBAR-TRACK-COLOR:#...

    css 滚动条换色调整代码

    对于其他浏览器,可以使用更现代的CSS伪元素`::webkit-scrollbar`和`::webkit-scrollbar-part`来实现滚动条的自定义,但这种方法并不兼容IE。 总的来说,通过CSS我们可以根据设计需求对滚动条进行换色和风格调整,...

    div overflow 超出隐藏属性使用说明

    注意,这些滚动条定制属性只在IE浏览器中有效,对于其他浏览器如Firefox、Chrome等,需要使用更现代的CSS方法,如使用`::-webkit-scrollbar`选择器进行定制。 4. 实际应用示例: - 隐藏浏览器窗口滚动条: ```...

    学习更轻松!!!一些常用的JS代码

    scrollbar-Face-Color: #ffffff; scrollbar-Shadow-Color: #000000; scrollbar-3dLight-Color: #ffffff; scrollbar-Highlight-Color: #ffffff; } ``` 这段CSS代码用于定制网页中滚动条的样式,例如改变滚动条的...

    前端开发问题解决祥录

    通过CSS属性,例如`scrollbar-arrow-color`、`scrollbar-face-color`等,开发者可以自定义滚动条的颜色。然而,这种方法只限于颜色调整,并不能实现更复杂的设计需求。对于那些希望创建更具视觉吸引力的滚动条的...

    css常见考题 !!css常见考题 css常见考题

    scrollbar-face-color: #f6f6f6; scrollbar-highlight-color: #fff; scrollbar-shadow-color: #eeeeee; scrollbar-3dlight-color: #eeeeee; scrollbar-arrow-color: #000; scrollbar-track-color: #fff; ...

    非常漂亮网页常用效果js

    例如,`scrollbar-arrow-color`用来设置滚动箭头的颜色,`scrollbar-base-color`设定滚动条的基本颜色,`scrollbar-dark-shadow-color`是滚动条的深色阴影,`scrollbar-face-color`为滚动条的立体部分颜色,`...

    DIV CSS最有可能遇到的八个面试问题

    scrollbar-face-color: #f6f6f6; scrollbar-highlight-color: #fff; scrollbar-shadow-color: #eeeeee; scrollbar-3dlight-color: #eeeeee; scrollbar-arrow-color: #000; scrollbar-track-color: #fff; ...

    详解如何自定义CSS滚动条的样式

    包括scrollbar-arrow-color、scrollbar-face-color、scrollbar-track-color和scrollbar-shadow-color等,这些属性分别对应滚动条的不同部分颜色。 例如,要改变IE浏览器滚动条三角箭头的颜色,可以使用: ```css ...

    css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

    SCROLLBAR-FACE-COLOR: #f892cc; SCROLLBAR-HIGHLIGHT-COLOR: #f256c6; SCROLLBAR-SHADOW-COLOR: #fd76c2; SCROLLBAR-3DLIGHT-COLOR: #fd76c2; SCROLLBAR-ARROW-COLOR: #fd76c2; SCROLLBAR-TRACK-COLOR: #fd76...

    div css 滚动条样式 DIV滚动条属性及样式设置方式

    1. `scrollBar-face-color`:滚动条滑块的颜色。 2. `scrollBar-highlight-color`:滚动条滑块在鼠标悬停时的高亮颜色。 3. `scrollBar-3dLight-color`:三维光线颜色,一般在滚动条的边角。 4. `scrollBar-dark...

Global site tag (gtag.js) - Google Analytics