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

时间:2022-03-15 01:47:42

关于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 { }   
::-webkit-scrollbar-thumb{height: 50px; -webkit-border-radius: 3px;}  
解释:
::-webkit-scrollbar 滚动条宽跟高
::-webkit-scrollbar-track-piece 滚动条样式底部内层样式
::-webkit-scrollbar-thumb 滚动条滑块样式
-webkit-border-radius: 滚动条滑块边角–导圆角

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;   
      
}   
/* 鼠标悬停时按钮颜色 */  
  
thumb:hover,scrollbarbutton:hover {   
   -moz-appearance: none !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”$amp;>amp;$lt;/script$amp;>amp;$nbsp;   
<script type=“text/javascript” src=“jquery.linscroll.js“$amp;>amp;$lt;/script$amp;>amp;$nbsp;   
<script type=“text/javascript”$amp;>amp;$nbsp;   
$(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$amp;>amp;$nbsp; 
HTML
<div id=“scrollContent” style=“width:140px;overflow:hidden;height:170px;”>内容</div$amp;>amp;$nbsp;

关于scrollbar-face-color只支持ie的解决办法!的更多相关文章

  1. 谷歌浏览器Chrome不再支持showModalDialog的解决办法

    问题重现 弹出窗口编码: JavaScript 0 1 2 3 4 5 6 7   var obj = new Object();   var retval = window.showModalDia ...

  2. mac中matplotlib不支持中文的解决办法

    参考:https://blog.csdn.net/kaizei_pao/article/details/80795377 首先查看matplotlib已加载的字体: import matplotlib ...

  3. 苹果手机对网页上样式为position&colon;fixed的弹窗支持不好的解决办法

    在Web页面上,如果想模拟对话框效果,一般会给div元素添加position:fixed的样式来实现,然后给背景添加一个半透明的遮罩.如: .fixedDiv { position: fixed; t ...

  4. php中curl不支持https的解决办法

    在php程序中使用curl去访问https站点时,报错:Protocol https not supported or disabled in libcurl 该错误信息表示php当时编译时使用的cu ...

  5. python---不支持中文注释解决办法

    很神奇的一件事儿,pycharm不支持中文注释,具体解决办法: #-*- coding: utf- -*- 具体使用:

  6. 服务不支持 chkconfig 的解决办法

    在chkconfig --add servername的时候老是提示服务不支持 chkconfig 经过查找,解决办法如下. 1.脚本tomcatstart前三行如下: #!/bin/bash #ch ...

  7. &lbrack;转&rsqb;Nginx&plus;ThinkPHP不支持PathInfo的解决办法

    FROM : http://www.4wei.cn/archives/1001174 应集团要求,公司的服务器全收到集团机房统一管理了,失去了服务器的管理配置权限. 杯具就此开始. 首先要解决文件大小 ...

  8. JqueryQrcode生成二维码不支持中文的解决办法

    JqueryQrcode.js有一个小小的缺点,就是默认不支持中文. 这跟js的机制有关系,jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的, 而这个方法默认会 ...

  9. ScrollView中嵌套GridView,ListView只显示一行的解决办法

    转载:http://blog.csdn.net/luohai859/article/details/39347583 关于为什么只显示一行,个人理解是:如果单独使用GridView和ListView, ...

随机推荐

  1. sql server 使用函数辅助查询

    函数是所有语言系统下都具备的内部数据处理过程,SQL SERVER也同样内置了许多函数.在SQL SERVER中,函数是由一个或多个T-SQL语句组成的子程序.利用函数可以简化数据的处理操作. 函数分 ...

  2. Redis系列-远程连接redis并给redis加锁

    假设两台redis服务器,ip分别为:192.168.1.101和192.168.1.103,如何在101上通过redis-cli访问103上的redis呢?在远程连接103之前,先讲下redis-c ...

  3. Linux重启inotify配置max&lowbar;user&lowbar;watches无效被恢复默认值8192的正确修改方法

    Linux下Rsync+inotify-tools实现数据实时同步中有一个重要的配置就是设置Inotify的max_user_watches值,如果不设置,当遇到大量文件的时候就会出现出错的情况. 一 ...

  4. mul8&lowbar;unsigned multipliter

    李亚民老师更注重硬件设计思想的训练.他给出的硬件设计方法更贴近底层硬件,下面看看他的设计思想:                                                      ...

  5. 图解C&num;&lowbar;事件

    概述 今天用来演示事件的例子是模拟实现一个文件下载类,在这个类中我将定义一个DownLoad事件,这个事件用来在文件下载的过程中,向订阅这个事件的用户发出消息,而这个消息将用DownLoadEvent ...

  6. mybatis只能模糊查询英文不能查询中文

    解决方法:修改配置文件,最简单的完美修改方法,修改mysql的my.cnf文件中的字符集键值(注意配置的字段细节): 1.在[client]字段里加入default-character-set=utf ...

  7. NI Vision for LabVIEW 基础&lpar;一&rpar;:NI Vision 简介

    NI Vision 控件模板 Vision控件模板位于LabVIEW控件模板的最顶层,由一下元素组成: IMAQ Image.ctl—该控件是一个类型定义,用于声明图象类型的数据.在VI的前面板中使用 ...

  8. web-iPhone X

    题目: 解题思路: 第一次看到html里只有字其他啥也没有的题,一脸懵逼,学长提示抓包改包,于是开始我的苦逼解题. 0x01 抓包 0x02 改包 由于题目说只有iphoneX才能接受这个websit ...

  9. python---数据类型---列表

    #列表: name = ["lc","pxm","pt"] print('------------',name[2],"----- ...

  10. Java学习导航

    由于最近在系统的重新学习Java,为了便于日后复习,给个人博客中Java内容做一个目录. Java基础:Java虚拟机(JVM) Java基础:内存模型 Java基础:JVM垃圾回收算法 Java基础 ...