CSS3或CSS+JS实现改变滚动条样式(兼容所有浏览器)
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 16px; /*滚动条宽度*/
height: 16px; /*滚动条高度*/
} /*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px; /*滚动条的背景区域的圆角*/
background-color: red;/*滚动条的背景颜色*/
} /*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px; /*滚动条的圆角*/
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: green; /*滚动条的背景颜色*/
}
- ::-webkit-scrollbar 滚动条整体部分
- ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
- ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
- ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
- ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
- ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
- ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
想给单个节点设置滚动条，即在上面的伪类前面加上 ID/样式名字：例如：
.scroll_style::-webkit-scrollbar
{
width: 16px; /*滚动条宽度*/
height: 16px; /*滚动条高度*/
}
详细信息请参考 http://blog.csdn.net/hanshileiai/article/details/40398177 上述样式是指针对谷歌浏览器生效的。（不兼容火狐，IE） IE 的写法和上面不太一样
- scrollbar-arrow-color: color; /*三角箭头的颜色*/
- scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/
- scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
- scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/
- scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
- scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
- scrollbar-track-color: color; /*立体滚动条背景颜色*/
- scrollbar-base-color:color; /*滚动条的基色*/
令人遗憾的是 火狐目前还没有修改滚动条样式的 CSS支持
不过我们可以利用插件，比较好的插件有malihu-custom-scrollbar-plugin
使用方法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<link href="../css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.11.1.js"></script>
<script src="../js/jquery-ui-1.10.4.min.js"></script>
<script src="../js/jquery.mousewheel-3.0.6.min.js"></script>
<script src="../js/jquery.mCustomScrollbar.min.js"></script>
<style>
._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
background:red;
width:10px;
}
._mCS_1 .mCSB_scrollTools .mCSB_draggerRail{
background:blue;
width:5px;
}
</style>
<body> <div class="content" style="width:500px;height:500px;overflow-y:auto;border:1px solid green;">
<div style="height:900px;"></div>
</div>
<script type='text/javascript'>
(function($){
$(window).load(function(){
$(".content").mCustomScrollbar({
scrollButtons:{
enable:false,//是否添加 滚动条两端按钮支持 值:true,false
scrollType:"continuous",//滚动按钮滚动类型 值:”continuous”(当你点击滚动控制按钮时断断续续滚动) “pixels”(根据每次点击的像素数来滚动)
scrollSpeed:,//设置点击滚动按钮时候的滚动速度(默认 20)
scrollAmount://设置点击滚动按钮时候每次滚动的数值 像素单位 默认 40像素
},
horizontalScroll:false,//是否创建一个水平滚动条 默认是垂直滚动条
set_width:false,//：设置你内容的宽度 值可以是像素或者百分比
set_height:false,//：设置你内容的高度 值可以是像素或者百分比
mouseWheel:true,//鼠标滚动的支持 值为:true.false
//mouseWheelPixels:10,//：鼠标滚动中滚动的像素数目(step) 值为以像素为单位的数值
callbacks:{
onScrollStart:function(){//使用自定义的回调函数在滚动时间开始的时候执行 },
onScroll:function(){//自定义回调函数在滚动中执行 },
onTotalScroll:function(){//当滚动到底部的时候调用这个自定义回调函数 },
onTotalScrollBack:function(){//当滚动到顶部的时候调用这个自定义回调函数 },
onTotalScrollOffset:,//设置到达顶部或者底部的偏移量 像素单位 whileScrolling:function(){//当用户正在滚动的时候执行这个自定义回调函数 },
whileScrollingInterval:,//设置调用 whileScrolling 回调函数的时间间隔 毫秒单位
}
});
});
})(jQuery);
</script>
</body>
</html>
其中 mCustomScrollbar.css + jquery.js + jquery-ui.js + mousewheel.js + mCustomScrollbar.js 这5个必须引入。注意引入顺序
令人遗憾的人，滚动条的样式不可以配置，需要手动写入样式(我也是醉了)
如果页面上有需要配置的多个滚动条
._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
/* 1st scrollbar dragger style... */
}
._mCS_2 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
/* 2nd scrollbar dragger style... */
}
._mCS_3 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
/* 3rd scrollbar dragger style... */
}
上面的代码可以这样理解 mCSB_dragger 下面的 mCSB_dragger_bar 当然你对这个层级有点懵逼。还好官方有个图片指示对应的结构
根据这张图片，就可以很容易的定义滚动条的样式了。
._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
background:red;
width:10px;
}
._mCS_1 .mCSB_scrollTools .mCSB_draggerRail{ /*这个就对应图片修改滚动条的背景色*/
background:blue;
width:5px;
}
修改样式 就对应上面的图片 看他们的层级和名字 修改对应的样式即可
CSS3或CSS+JS实现改变滚动条样式(兼容所有浏览器)的更多相关文章
- 笔记：css3伪选择器改变滚动条样式
现在我打开支持前缀-webkit-的浏览器,也就是说只要支持前缀为-webkit-的浏览器才有效果 <!doctype html> <html lang="en" ...
- 【问题】js 改变鼠标样式，chrome浏览器不能立即更新，暂没有解决办法
元素的css,cursor可以改变鼠标样式.也就是鼠标放到元素上去时,改变为相应状态. 通过JS改变cursor时,我发现chrome浏览器不能立即更新,需要动一下鼠标才行,试了几个其它浏览器都是立即 ...
- css样式兼容不同浏览器问题解决办法
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...
- JS获取回车事件（兼容各浏览器）
一.用到onkeydown获取事件动作, 二.用到键盘对应代码keyCode, 三. var event=arguments.callee.caller.arguments[0]||window.ev ...
- CSS文本溢出效果&滚动条样式设置
一.文本溢出 1.overflow: hidden; 超出文本会被剪裁隐藏不可见 scroll;超出文本会被剪裁, 显示滚动条 auto; 如果文本超出会显示滚动条,没超出不会显示, overflo ...
- javascript创建css、js，onload触发callback兼容主流浏览器的实现
http://www.fantxi.com/blog/archives/load-css-js-callback/ 由于需要写个函数,既可以加载css,又可以加载js,所以对各主流浏览器对加载js.c ...
- 自定义滚动条样式-兼容IE
滚动条样式设置 html部分: 1 <div id="scroll" style="width: 500px; height: 300px; border: 2px ...
- jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )
/* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...
- 纯css制作带三角border篇(兼容所有浏览器)
今天帅哥给你们介绍下,如何用 border 来制作三角. html 代码如下: 复制代码 代码如下: <div class="arrow-up"></div> ...
随机推荐
- Dart静态方法、对象操作符和类的继承
/* Dart中的静态成员: 1.使用static 关键字来实现类级别的变量和函数 2.静态方法不能访问非静态成员,非静态方法可以访问静态成员 */ // class Person { // stat ...
- 开源配置中心xxl-conf的核心原理分析
XXL-CONF是一款轻量级的开源配置中心项目,由国内大牛许雪里开发.下面是官方对其优点作出的描述: 一个轻量级分布式配置管理平台,拥有"轻量级.秒级动态推送.多环境.跨语言.跨机房.配置监 ...
- Python3基础 函数 多值参数 元组与字典形式(键值对分别指出)
Python : 3.7.3 OS : Ubuntu 18.04.2 LTS IDE : pycharm-community-2019.1.3 ...
- Qt编写气体安全管理系统8-曲线监控
一.前言 曲线监控模块用的很少,主要就是用来观察某个设备的实时采集的数据和历史采集的数据,可以回放数据,在右侧可以选择对应的通信端口和控制器,然后选择指定的探测器进行观察,从选择的时候开始计时,每个数 ...
- Cheng MeiChun团队的技术支持
本网页为Cheng MeiChun团队的技术支持网址,如果在我们开发的游戏中遇到任何问题,欢迎联系我们! QQ:1505478990 邮箱:1505478990@qq.com
- SAP 增强篇 Method1 BADI增强的查找方法
查找BADI的方法:(1)通过SE24,输入CL_EXITHANDLER,然后在方法GET_INSTANCE中设置断点,然后运行事务代码判断 exit_name的值,操作过程如下:输入se24,然后输 ...
- Spring Cloud 如何实现服务间的调用 4.2.3
如果存在多个服务时,要怎么通过注册中心来实现服务之间的调用呢?接下来将通过一个用户和订单之间的调用案例,来演示Eureka Server中服务之间的调用. 搭建订单服务工程 在父工程xcservi ...
- Spring Boot与Redis的集成
Redis是一个完全开源免费的.遵守BSD协议的.内存中的数据结构存储,它既可以作为数据库,也可以作为缓存和消息代理.因其性能优异等优势,目前已被很多企业所使用,但通常在企业中我们会将其作为缓存来使用 ...
- online学习和offline学习
参考:https://blog.csdn.net/a133521741/article/details/79221015 解释: (1)offline学习:每次训练完一个batch后再更新参数: (2 ...
- 深层对象转深层数组（重点：先把对象转数组，直接for in 遍历对象不太可行）
var json: { PRow0: { style: { width: 10 } }, PTable1: { style: { height: 20 } } } const jsonToArrTre ...