兼容IE的滚动条自定义样式
废话不多说,直接上;
IE专属的滚动条样式定义,只能设置各种原始结构的颜色,宽高结构等其他样式无法修改;
div{
scrollbar-arrow-color: red; /*三角箭头的颜色*/
scrollbar-face-color: green; /* 立体滚动条的颜色(包括箭头部分的背景色) */
scrollbar-3dlight-color: blue; /* 立体滚动条亮边的颜色 */
scrollbar-highlight-color: #ddd; /* 滚动条的高亮颜色(左阴影?) */
scrollbar-shadow-color: pink;/* 立体滚动条阴影的颜色 */
scrollbar-darkshadow-color: #ccc;/* 立体滚动条外阴影的颜色 */
scrollbar-track-color: orange; /* 立体滚动条背景颜色 */
scrollbar-base-color: yellow;/* 滚动条的基色 */
}
webkit内核浏览器的滚动条样式美化:
#scroll-1 div {
width:400px;
height:400px;
}
#scroll-1::-webkit-scrollbar { ::-webkit-scrollbar //滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。
width:60px;
height:10px;
}
#scroll-1::-webkit-scrollbar-button{ ::-webkit-scrollbar-button //滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果.
background-color:black;
}
#scroll-1::-webkit-scrollbar-track{ ::-webkit-scrollbar-track // 外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
background:blue;
display: none;
}
#scroll-1::-webkit-scrollbar-track-piece { ::-webkit-scrollbar-track-piece //内层轨道,滚动条中间部分。
background:green;
}
#scroll-1::-webkit-scrollbar-thumb{ ::-webkit-scrollbar-thumb //滚动条里面可以拖动的那部分,即滚动条。
background:pink;
border-radius:200px;
}
#scroll-1::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner //边角.
background:#ddd;
}
#scroll-1::-webkit-scrollbar-resizer { ::-webkit-resizer //定义右下角拖动块的样式.
background:red;
}
html部分:
<div id="scroll-1" style="width: 500px; height: 300px; border: 2px solid #1F1F1F; margin: 20px auto; overflow: auto; ">
<div style="margin:0 auto;;height:800px;border:1px solid #ddd;width:400px;">内容部分内容部分</div>
</div>
以上就是ie和webkit内核浏览器的滚动条样式修改(个中感受自己体会)。
最后:
另外我还找到一种可以修改IE支持的浏览器的样式的插件!试了一下,感觉还可以,只是插件内的代码还不是很懂;
首先引入JQuery库,再引入zUI.js这个插件,
写入你自己修改的样式代码(这个选择器应该是插件中可识别的,不是很懂,但能用):
.zUIpanelScrollBox,.zUIpanelScrollBar{
width:10px;
top:4px;
right:2px;
border-radius:5px;
}
.zUIpanelScrollBox{
background:black;opacity:0.1;
filter:alpha(opacity=10);
}
.zUIpanelScrollBar{
background:red;opacity:0.8;
filter:alpha(opacity=80);
}
最后对插件进行初始化即可
$(function(){
$("#scroll-1").panel({iWheelStep:32});
});
iWheelStep:32;滚动条滚动的速度,可修改。
火狐的暂时还没有兼容到,后期学习到再补上。
(PS:一起学习,共同进步!有不对的地方希望大佬们帮忙纠正,万分感谢!)
最新文章
- linux学习日记之鸟哥
- Linux0.11内核--内存管理之1.初始化
- HTML兼容问题——HACK技术
- 为网格布局图片打造的超炫 CSS 加载动画
- js == 判断
- gulp-htmlmin压缩html
- 整理的一些常用的CSS HACK
- java 多线程8(守护线程)
- spring路径通配符
- HeadFirst设计模式之适配器模式
- centos上安装jdk环境
- python与编码
- structure and interpretation of Computer programs -- Foreword
- WAMPServer 集成环境
- Android Camera2采集摄像头原始数据并手动预览
- 简单使用zabbix监控nginx是否存活
- python学习笔记4-切片
- Navicat连接Mysql8.0失败:Client does not support authentication protocol requested by server...
- jQuery截取字符串、日期字符串转Date、获取html中的纯文本
- Code Chef DARTSEGM(计算几何+凸包)
热门文章
- Android Studio3.0中dependencies依赖由compile变为implementation的区别
- EntityFrameWork Parameter &#39;@columnType&#39; must be defined.
- 了解Hadoop
- 3.7-3.10 Hive 企业使用优化1
- POJ 3262 Protecting the Flowers 贪心(性价比)
- Unity2D研究院之自动生成动画、AnimationController、Prefab(一)
- Unity3D asset bundle 格式简析
- uoj#418. 【集训队作业2018】三角形(线段树合并)
- 慕课笔记-Java入门第一季
- Java基础 使用Properties类