关于scrollbar-face-color只支持ie的解决办法!
关于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的解决办法!的更多相关文章
- 谷歌浏览器Chrome不再支持showModalDialog的解决办法
问题重现 弹出窗口编码: JavaScript 0 1 2 3 4 5 6 7 var obj = new Object(); var retval = window.showModalDia ...
- mac中matplotlib不支持中文的解决办法
参考:https://blog.csdn.net/kaizei_pao/article/details/80795377 首先查看matplotlib已加载的字体: import matplotlib ...
- 苹果手机对网页上样式为position:fixed的弹窗支持不好的解决办法
在Web页面上,如果想模拟对话框效果,一般会给div元素添加position:fixed的样式来实现,然后给背景添加一个半透明的遮罩.如: .fixedDiv { position: fixed; t ...
- php中curl不支持https的解决办法
在php程序中使用curl去访问https站点时,报错:Protocol https not supported or disabled in libcurl 该错误信息表示php当时编译时使用的cu ...
- python---不支持中文注释解决办法
很神奇的一件事儿,pycharm不支持中文注释,具体解决办法: #-*- coding: utf- -*- 具体使用:
- 服务不支持 chkconfig 的解决办法
在chkconfig --add servername的时候老是提示服务不支持 chkconfig 经过查找,解决办法如下. 1.脚本tomcatstart前三行如下: #!/bin/bash #ch ...
- [转]Nginx+ThinkPHP不支持PathInfo的解决办法
FROM : http://www.4wei.cn/archives/1001174 应集团要求,公司的服务器全收到集团机房统一管理了,失去了服务器的管理配置权限. 杯具就此开始. 首先要解决文件大小 ...
- JqueryQrcode生成二维码不支持中文的解决办法
JqueryQrcode.js有一个小小的缺点,就是默认不支持中文. 这跟js的机制有关系,jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的, 而这个方法默认会 ...
- ScrollView中嵌套GridView,ListView只显示一行的解决办法
转载:http://blog.csdn.net/luohai859/article/details/39347583 关于为什么只显示一行,个人理解是:如果单独使用GridView和ListView, ...
随机推荐
- MVC – 14.ajax异步请求
14.1.配置文件 14.2.AjaxHelper – 异步链接按钮 14.3.AjaxHelper – 异步表单 AjaxOptions常见属性: 14.4.AjaxOptions对象生成[对应]触 ...
- Oracle的thin驱动和oci驱动有什么不同?哪个性能好些?
OCI:要安装ORACLE客户端,移植性略差,理论上性能好些 THIN:属于TYPE4,纯JAVA实现,移植性好,理论上性能略差些 推荐:最好还是使用THIN DRIVER吧,移植性好些,使用起来 ...
- GMap.Net开发之在WinForm和WPF中使用GMap.Net地图插件
GMap.NET是什么? 来看看它的官方说明:GMap.NET is great and Powerful, Free, cross platform, open source .NET contro ...
- 莫队算法 2038: [2009国家集训队]小Z的袜子(hose)
链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2038 2038: [2009国家集训队]小Z的袜子(hose) Time Limit: 20 ...
- android 面试题
一,什么是OOM (1)先从定义开始:Android(Java)中常见的容易引起内存泄漏的不良代码Android主要应用在嵌入式设备当中,而嵌入式设备由于一些众所周知的条件限制,通常都不会有很高的配置 ...
- 初探数位DP-hdu2089
一开始刷dp就遇到了数位dp,以前程序设计艺术上看过一点,基本没懂,于是趁今天遇到题目,想把它搞会,但就目前状态来看仍然是似懂非懂啊,以后还要反复搞 统计区间[l,r]的满足题意的数的个数,可以转换成 ...
- PING命令入门详解
转自:http://www.linkwan.com/gb/tech/htm/928.htm 1.Ping的基础知识 ping命令相信大家已经再熟悉不过了,但是能把ping的功能发挥到最大的人却并不是很 ...
- 在64位Win7中使用Navicat Premium 和PL\SQL Developer连接Oracle数据库备忘
最近接手了一个项目,服务器端数据库是oracle 11g 64位.由于主要工作不是开发,也不想在自己的电脑上安装庞大的oracle数据库,因此寻思着只通过数据库管理工具连接数据库进行一些常用的查询操作 ...
- MySQL中的约束简单使用
数据库约束是为了保证数据的完整性而实现的一套机制,它具体的根据各个不同的数据库的实现而有不同的工具.一般来说有以下几种实现方式:1.检查约束:通过在定义数据库表里,在字段级或者是在表级加入的检查约束, ...
- windows OBJECT查找
PspCidTable表里.索引值总之4的倍数.也就是说 PID/4 才是PspCidTable索引.*8 才是PsPCidTable+偏移.获取进程对应的 _HANDLE_TABLE_ENTRY 结 ...