webkit之滚动条美化

由于公司的产品改用webkit内核,在写公共css的时候,不想使用插件模拟,顺便网上查阅了下css3的滚动条美化。

首先,先上一副示意图。

从网络上盗图的(来源 http://zhangyaochun.iteye.com/blog/1743283)。

以下是对应的伪类:

::-webkit-scrollbar{/*1*/} /*滚动条整体部分,一般可以设置宽度*/

::-webkit-scrollbar-button{/*2*/}/*两端的按钮*/
 ::-webkit-scrollbar-track{/*3*/}/*外层轨道(track本身就是轨道的意思)*/
 ::-webkit-scrollbar-track-piece{/*4*/}/*内层滚动槽*/
::-webkit-scrollbar-thumb{/*5*/}/*滑块*/
 ::-webkit-scrollbar-corner{/*6*/}/*滚动条整体部分*/
::-webkit-resizer{/*7*/}/*右下角拖动块的样式*/

同时,上面的伪类还可以跟以下的伪类配合使用:

 1 :horizontal(horizontal伪类适用于任何水平方向上的滚动条)
 2
 3 :vertical(vertical伪类适用于任何垂直方向的滚动条)
 4
 5 :decrement(decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片,例如可以使区域向上或者向右移动的区域和按钮)
 6
 7 :increment(increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片,例如可以使区域向下或者向左移动的区域和按钮)
 8
 9 :start(start伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的前面)
10
11 :end(end伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的后面)
12
13 :double-button(double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。)
14
15 :single-button(single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。)
16
17 :no-button(no-button伪类表示轨道结束的位置没有按钮。)
18
19 :corner-present(corner-present伪类表示滚动条的角落是否存在。)
20
21 :window-inactive(适用于所有滚动条,表示包含滚动条的区域,焦点不在该窗口的时候。)
22
23 ::-webkit-scrollbar-track-piece:start {
24    /*滚动条上半边或左半边*/
25 }
26
27 ::-webkit-scrollbar-thumb:window-inactive {
28    /*当焦点不在当前区域滑块的状态*/
29
30 }
31
32 ::-webkit-scrollbar-button:horizontal:decrement:hover {
33    /*当鼠标在水平滚动条下面的按钮上的状态*/
34
35 }

用法就是连起来使用,不过以上的内容均来自copy,既然是伪类,就可以在前面加上不同的class来修饰,以下是我写的一个示例的:

 1 .qs-scrollbar::-webkit-scrollbar-track {
 2     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 3     -webkit-border-radius: 10px;
 4     border-radius: 10px;
 5 }
 6 .qs-scrollbar::-webkit-scrollbar-button:decrement {
 7     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 8     height: 10px;
 9     background:url("../img/sprite.png")  -11px 0px no-repeat;
10     background-color: transparent;
11     /*background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox=‘0 0 10 10‘ xmlns=‘http://www.w3.org/2000/svg‘ xmlns:xlink=‘http://www.w3.org/1999/xlink‘><defs><line id=‘l‘ x1=‘60‘ x2=‘60‘ y1=‘7‘ y2=‘27‘ stroke=‘%236c6c6c‘ stroke-width=‘11‘ stroke-linecap=‘round‘/></defs><g><use xlink:href=‘%23l‘ opacity=‘.27‘/><use xlink:href=‘%23l‘ opacity=‘.27‘ transform=‘rotate(30 60,60)‘/></g></svg>");*/
12 }
13 .qs-scrollbar::-webkit-scrollbar-button:increment {
14     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
15     height: 10px;
16     background:url("../img/sprite.png")  0px -0px no-repeat;
17     background-color: transparent;
18     /*background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox=‘0 0 10 10‘ xmlns=‘http://www.w3.org/2000/svg‘ xmlns:xlink=‘http://www.w3.org/1999/xlink‘><defs><line id=‘l‘ x1=‘60‘ x2=‘60‘ y1=‘7‘ y2=‘27‘ stroke=‘%236c6c6c‘ stroke-width=‘11‘ stroke-linecap=‘round‘/></defs><g><use xlink:href=‘%23l‘ opacity=‘.27‘/><use xlink:href=‘%23l‘ opacity=‘.27‘ transform=‘rotate(30 60,60)‘/></g></svg>");*/
19 }
20
21 /* Handle */
22 .qs-scrollbar::-webkit-scrollbar-thumb {
23     -webkit-border-radius: 10px;
24     border-radius: 10px;
25     background:rgba(153,153,153,0.7);
26     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
27 }
28 .qs-scrollbar::-webkit-scrollbar-thumb:window-inactive {
29     background: rgba(153,153,153,0.4);
30 }
::-webkit-scrollbar-button后面跟上:increment或者decrement表示上/下箭头,其他的伪类以此类推,大概使用方式就是这样,还有那个背景图可以使用svg的效果图如大致如下(除滚动条部分请无视)

				
时间: 2024-10-29 00:45:24

webkit之滚动条美化的相关文章

jQuery高性能自定义滚动条美化插件

malihu是一款高性能的滚动条美化jQuery插件.该滚动条美化插件支持水平和垂直滚动条,支持鼠标滚动,支持键盘滚动和支持移动触摸屏.并且它可以和jQuery UI和Bootatrap完美的结合,相当的强大.它的特点有: 支持垂直和水平滚动条 可调整滚动的动量 支持鼠标滚轮.键盘和移动触摸来移动滚动条 预定义主题,并且可以通过CSS来修改主题 支持RTL方向 提供大量参数来支持滚动条的美化和功能实现 提供大量方法来控制滚动条 用户自定义回调函数 可选择和搜索内容 效果演示:http://www

jQuery 節點替換 &amp;&amp; DIV 滚动条美化特效

使用 replaceWith 替換節點后,在原來節點上的事件都會被去除. 所以,如果要保留節點上的事件,可以只替換節點內的內容達到目的!不替換已經綁定事件的節點. .read_box { height:480px; background:#141414; position:absolute; z-index:99999; top:25%; width:80%; left:10%; z-index:-999; /* 要使用scrollbar.js 文件,這個容器就必須設置display為block

滚动条美化插件jquery.nicescroll

今天给大家介绍一个滚动条美化插件jquery.nicescroll,这个插件有以下一个主意事项: 1.兼容所有最新的桌面浏览器和旧版:Chrome,Firefox,Edge,IE8 +,Safari(win / mac),Opera 2.兼容移动设备:iPad / iPhone / iPod,Android 4 +,Blackberry手机和Playbook(WebWorks / Table OS),Windows Phone 8和10 3.兼容所有触摸设备:iPad,Android平板电脑,W

滚动条美化实践(原生js,iscroll,nicescroll)

近期需要改造项目中的滚动条,使原滚动条在三大浏览器下表现相同,分享一下自己的改造经历: 项目中的滚动条分布在网页的各个小窗口中,使用的是-webkit-scrollbar制作,在-webkit内核的浏览器下表现非常漂亮,但是在ie和火狐下无法兼容,还是非常丑的默认样式. 原计划使用css hack打个补丁美化一下,想到ie hack以后变色的默认滚动条,觉得浑身"蓝瘦香菇".于是决定重写一下这个部分,反正以后用到的地方可以直接拿出来用. 第一次计划打算自己手写,反正逻辑挺简单的,设定个

NB的CSS样式集锦1——CSS3滚动条美化,CSS3滚动条皮肤

转自:http://www.pengyaou.com/codecss3/POKDNMS_112.html CSS3 -webkit-scrollbar滚动条皮肤美化实现,利用-webkit-scrollbar,-webkit-scrollbar-track,-webkit-scrollbar-thumb这2个属性设置不同样式的滚动条. 下面是5个滚动条样式. css代码 1 .test1::-webkit-scrollbar { 2 width: 8px; 3 } 4 .test1::-webk

CSS3滚动条美化,CSS3滚动条皮肤

CSS3 -webkit-scrollbar滚动条皮肤美化实现,利用-webkit-scrollbar,-webkit-scrollbar-track,-webkit-scrollbar-thumb这2个属性设置不同样式的滚动条. 下面是5个滚动条样式. css代码 1 .test1::-webkit-scrollbar { //滚动条的宽度 2 width: 8px; 3 } 4 .test1::-webkit-scrollbar-track { //滚动条的样式 5 background-c

浏览器滚动条美化样式插件

Jquery.Nicescroll.js nicescroll是一个jQuery插件支持水平滚动条!它支持div,iframe,文本,文档页面滚动条.所有的桌面浏览器兼容:Firefox 4 + 5 +,Chrome,Safari 4 +,Opera 10 +,IE+6与移动设备兼容:iPhone / iPod / ipad,Android 2.2 +,黑莓手机和PlayBook(webworks /表操作系统),Windows Phone 7.5芒果和Windows手机8.所有触摸设备兼容:i

滚动条美化

引入jquery.nicescroll.js详见githubgo然后 $('.produce').niceScroll({ cursorcolor: "#b8ecfa",//#CC0071 光标颜色 cursoropacitymax: 1, //改变不透明度非常光标处于活动状态(scrollabar"可见"状态),范围从1到0 touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备 cursorwidth: "6px"

滚动条美化插件 nicescroll

这个插件使用起来非常简单,首先下载插件jquery.nicescroll.min.js 然后在页面中引入jquery,再引入这个插件, 然后在页面中需要修改滚动条的地方,例如id为box的div <div id="box"> 在js中给这个div添加一个方法就可以了: $("#box").niceScroll(); 具体参数,可以查看插件的api文档: 实例代码: <!DOCTYPE html> <html> <head&g