`
IT_hack
  • 浏览: 15745 次
  • 性别: 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常用属性

    scrollbar-face-color: 滚动条凸出部分的颜色 scrollbar-highlight-color: 滚动条空白部分的颜色 scrollbar-shadow-color: 立体滚动条阴影的颜色 scrollbar-3dlight-color: 滚动条亮边的颜色...

    malihu-custom-scrollbar-plugin-master 自定义滚动条样式

    malihu-custom-scrollbar-plugin-master 自定义滚动条样式,可自定义滚动条颜色,长度,滚动条框的背景色等。

    idangerous.swiper.scrollbar-2.1.js

    idangerous.swiper.scrollbar-2.1.js添加上下滚动列表

    malihu-custom-scrollbar-plugin

    完美自定义滚动条,源代码+Demo,测试过了IE firefox 都支持

    scrollbar-width.js:计算浏览器窗口中滚动条的宽度

    scrollbar-width.js 是一个用于计算浏览器窗口滚动条大小的库。 它兼容 AMD、CommonJS 和标准浏览器环境。 安装/使用 AMD 与 AMD 一起使用很简单: require([ 'js/scrollbar-width' ], function...

    scrollbar-gutter-explainer:“ scrollbar-gutter” CSS属性的解释器

    解释器: scrollbar-gutter CSS属性 内容: 作者 参加 介绍 scrollbar-gutter CSS属性(在定义)可控制scrollbar-gutter的存在(可以保留用于显示滚动条的空间)。 这使Web作者在其布局如何与浏览器提供的滚动条...

    react-scrollbar-size:React钩子来计算浏览器滚动条的大小

    React滚动条大小React-Scrollbar-Size是一个挂钩,旨在计算用户代理的水平和垂直滚动条的大小。 它还将检测滚动条的大小何时更改,例如用户代理的缩放系数何时更改。安装React-Scrollbar-Size作为: :information: ...

    CSS教程:scrollbar的属性知识及样式分类介绍

    1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)...scrollbar-face-color立体滚动条凸

    好看的滚动条样式

    好看的滚动条样式; HEIGHT: 140;OVERFLOW: scroll; scrollbar-3dlight-color:#595959;... scrollbar-face-color:#CFCFCF; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#595959"&gt; 文字内容 &lt;/div&gt;

    tailwind-scrollbar:Tailwind CSS的滚动条插件

    Tailwind CSS的滚动条插件 为Firefox和基于Webkit的浏览器中的滚动条添加样式实用程序。安装yarn add -D tailwind-... 然后,您可以添加任何所需的scrollbar-track-{color} , scrollbar-thumb-{color}或hover:

    关于HTML中的滚动条/去掉滚动条问题

    1.xhtml下滚动条的颜色问题 ... /*- 左二 -*/ scrollbar-face-color:#E4E4E4; /*- 面子 -*/ scrollbar-arrow-color:#666; /*- 箭头 -*/ scrollbar-shadow-color:#808080; /*- 右二 -*/ scrollbar-darkshadow-col

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

    复制代码代码如下: div { scrollbar-face-color: #fcfcfc; scrollbar-highlight-color: #6c6c90; scrollbar-shadow-color: #fcfcfc; scrollbar-3dlight-color: #fcfcfc; scrollbar-arrow-color: #240024; scrollbar

    HTML标签的overflow处理用应

    3d-light-color立体滚动条亮边的颜色 scrollbar-arrow-color上下按钮上三角箭头的颜色 scrollbar-base-color滚动条的基本颜色 scrollbar-dark-shadow-color立体滚动条强阴影的颜色 scrollbar-face-color立体滚动条...

    论坛特效代码收集(落伍转发-不错)

    1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)...scrollbar-face-color立体滚动条凸

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

    3d-light-color立体滚动条亮边的颜色 scrollbar-arrow-color上下按钮上三角箭头的颜色 scrollbar-base-color滚动条的基本颜色 scrollbar-dark-shadow-color立体滚动条强阴影的颜色 scrollbar-face-color立体滚动条...

    html滚动条 textarea属性设置

    1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)...scrollbar-face-color立体滚动条凸

    表格头固定而列可滚动的效果

    对于经常需要表格头部不东,而列表可以滚动,多用于数据比较多的情况,方便查看 ... scrollbar-face-color:#efefe7; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-color:#a5a5a5; scrollbar-darkshadow-co

    jquery滚动条tinyscrollbar-2.2.5

    很好用的滚动条 jquery插件

Global site tag (gtag.js) - Google Analytics