/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

::-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 的写法和上面不太一样
  1. scrollbar-arrow-color: color; /*三角箭头的颜色*/
  2. scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/
  3. scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
  4. scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/
  5. scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
  6. scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
  7. scrollbar-track-color: color; /*立体滚动条背景颜色*/
  8. 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实现改变滚动条样式(兼容所有浏览器)的更多相关文章

  1. 笔记：css3伪选择器改变滚动条样式

    现在我打开支持前缀-webkit-的浏览器,也就是说只要支持前缀为-webkit-的浏览器才有效果 <!doctype html> <html lang="en" ...

  2. 【问题】js 改变鼠标样式，chrome浏览器不能立即更新，暂没有解决办法

    元素的css,cursor可以改变鼠标样式.也就是鼠标放到元素上去时,改变为相应状态. 通过JS改变cursor时,我发现chrome浏览器不能立即更新,需要动一下鼠标才行,试了几个其它浏览器都是立即 ...

  3. css样式兼容不同浏览器问题解决办法

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...

  4. JS获取回车事件（兼容各浏览器）

    一.用到onkeydown获取事件动作, 二.用到键盘对应代码keyCode, 三. var event=arguments.callee.caller.arguments[0]||window.ev ...

  5. CSS文本溢出效果&滚动条样式设置

    一.文本溢出 1.overflow: hidden;  超出文本会被剪裁隐藏不可见 scroll;超出文本会被剪裁, 显示滚动条 auto; 如果文本超出会显示滚动条,没超出不会显示, overflo ...

  6. javascript创建css、js，onload触发callback兼容主流浏览器的实现

    http://www.fantxi.com/blog/archives/load-css-js-callback/ 由于需要写个函数,既可以加载css,又可以加载js,所以对各主流浏览器对加载js.c ...

  7. 自定义滚动条样式-兼容IE

    滚动条样式设置 html部分: 1 <div id="scroll" style="width: 500px; height: 300px; border: 2px ...

  8. jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )

    /* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...

  9. 纯css制作带三角border篇(兼容所有浏览器)

    今天帅哥给你们介绍下,如何用 border 来制作三角. html 代码如下: 复制代码 代码如下: <div class="arrow-up"></div> ...

随机推荐

  1. django实战总结2

    https://www.jianshu.com/p/9b3bfe934511 https://www.cnblogs.com/1Q84mi/p/xadmin002.html https://blog. ...

  2. Eureka 与 zookeeper 的区别、

    前言在微服务的开发过程中,如果使用的是 Dubbo 那就必须使用到 Zookeeper ,在使用 Spring Cloud Eureka 时,自然其功能更强大得多.博主也不得不感叹,Spring Cl ...

  3. 单独配置的nginx mysql 重启

    /usr/local/mysql/bin/mysqld_safe /usr/local/nginx/sbin/nginx -s stop /usr/local/nginx/sbin/nginx

  4. [ kvm ] 学习笔记 6：virsh 命令及功能详解

    1. 虚拟机管理操作 attach-device 从XML文件附加设备 attach-disk 附加磁盘设备 attach-interface 连接网络接口 autostart 自动启动一个域 blk ...

  5. 【TensorRT】自定义网络层的实现custom layers

    参考 1. Extending TensorRT With Custom Layers; 2. TensorRT Samples: MNIST(Plugin, add a custom layer); ...

  6. 原生JavaScript常用本地浏览器存储方法三(UserData IE Only)

    UserData的应用范围 serData是微软为IE专门在系统中开辟的一块存储空间,所以说只支持Windows+IE的组合,实际测试在2000(IE5.5).XP(IE6.IE7),Vista(IE ...

  7. 最新 苏州朗动java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.苏州朗动等10家互联网公司的校招Offer,因为某些自身原因最终选择了苏州朗动.6.7月主要是做系统复习.项目复盘.Leet ...

  8. idea设置项目【非springboot项目】热部署

    1.首先打开Edit Configurations 或者 2.添加的项目一定是war: exploded,而不是war 3.server这边,On 'Update' action选Redeploy,O ...

  9. redis的key设置每天凌晨过期的思路

    设置key凌晨过期的思路 设置key的值的时候,计算下当前时间到第二天凌晨的时间差,设置key的过期时间. 利用定时任务,每天凌晨将需要过期的key删除. 应用场景 按天为维度,限制用户对资源的访问次 ...

  10. LeetCode 108. 将有序数组转换为二叉搜索树(Convert Sorted Array to Binary Search Tree) 14

    108. 将有序数组转换为二叉搜索树 108. Convert Sorted Array to Binary Search Tree 题目描述 将一个按照升序排列的有序数组,转换为一棵高度平衡二叉搜索 ...