-------------jQuery滚动条插件-------------

http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

http://www.jsfoot.com/shouye/ue-design/

http://blog.sina.com.cn/s/blog_4abb9bba0101bgu7.html

-------------webkit内核滚动条-------------

webkit现在支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式。滚动条是一个伪元素,可以自定义样式。这个伪类可以将webkit自身的滚动条渲染关闭,只按照用户自定义的css信息进行渲染。

滚动条包括:滚动按钮和一个轨道。轨道本身有进一步氛围轨道碎片(track pieces)和一个滑块。轨道碎片值滑块上方和下面的区域。滚动条的角合适被设置为各种风格,比如可以调整文本区域的大小。

下面是关于滚动条的所有伪元素:

::-webkit-scrollbar{/**/}
::-webkit-scrollbar-button{/**/}
::-webkit-scrollbar-track{/**/}
::-webkit-scrollbar-track-piece{/**/}
::-webkit-scrollbar-thumb{/**/}
::-webkit-scrollbar-corner{/**/}
::-webkit-resizer{/**/}

任何对象都可以设置:边框、阴影、背景图片等等,创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。

  • :horizontal(horizontal伪类适用于任何水平方向上的滚动条)
  • :vertical(vertical伪类适用于任何垂直方向的滚动条)
  • :decrement(decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片,例如可以使区域向上或者向右移动的区域和按钮)
  • :increment(increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片,例如可以使区域向下或者向左移动的区域和按钮)
  • :start(start伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的前面)
  • :end(end伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的后面)
  • :double-button(double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。)
  • :single-button(single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。)
  • :no-button(no-button伪类表示轨道结束的位置没有按钮。)
  • :corner-present(corner-present伪类表示滚动条的角落是否存在。)
  • :window-inactive(适用于所有滚动条,表示包含滚动条的区域,焦点不在该窗口的时候。)
::-webkit-scrollbar-track-piece:start {
/*滚动条上半边或左半边*/
}
::-webkit-scrollbar-thumb:window-inactive {
/*当焦点不在当前区域滑块的状态*/
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/*当鼠标在水平滚动条下面的按钮上的状态*/
}

-------------IE内核滚动条-------------

如果在您看够了您的主页中灰色的滚动条,想让他变一种颜色,您该怎么办呢? 其实这很简单,插入一段代码就能实现了(必须是IE5以上,或者是以IE5为内核的浏览器)。
    首先,先让我们看这张图这段代码是在html中的和中加入其中#xxxxxx就是你选择的颜色的代码
如果你还不明白请在看下面的几个例子:

1 body { 
background: #4E544B; 
color: #FFFFFF; 
SCROLLBAR-FACE-COLOR: #6D7669; 
SCROLLBAR-HIGHLIGHT-COLOR: #6D7669; 
SCROLLBAR-SHADOW-COLOR: #363946; 
SCROLLBAR-3DLIGHT-COLOR: #B9C2B3; 
SCROLLBAR-ARROW-COLOR: #363946; 
SCROLLBAR-TRACK-COLOR: #363946; 
SCROLLBAR-DARKSHADOW-COLOR: #000000 
}

2

3 body { 
background-color: #ffffff; 
color: #336699; 
SCROLLBAR-FACE-COLOR: #BED8EB; 
SCROLLBAR-SHADOW-COLOR: #DDF8FF; 
SCROLLBAR-HIGHLIGHT-COLOR: #92C0D1; 
SCROLLBAR-3DLIGHT-COLOR: #DDF8FF; 
SCROLLBAR-DARKSHADOW-COLOR: #92C0D1; 
SCROLLBAR-TRACK-COLOR:#BED8EB; 
SCROLLBAR-ARROW-COLOR: #92C0D1 
}

自定义滚动条样式(jQuery插件、Webkit、IE)的更多相关文章

  1. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  2. CSS3自定义滚动条样式

    原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...

  3. CSS自定义滚动条样式

    原文地址:http://www.qianduan.net/css-custom-scroll-bar-style/ 相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器 ...

  4. 滚动条样式优化(CSS3自定义滚动条样式 -webkit-scrollbar)

    有时候觉得浏览器自带的原始滚动条不是很美观,那webkit浏览器是如何自定义滚动条的呢? Webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式.当然,兼 ...

  5. WPF 自定义滚动条样式

    先看一下效果: 先分析一下滚动条有哪儿几部分组成: 滚动条总共有五部分组成: 两端的箭头按钮,实际类型为RepeatButton Thumb 两端的空白,实际也是RepeatButton 最后就是Th ...

  6. 自定义滚动条样式-transition无效

    问题 需求是自定义滚动条样式,然后2秒内无操作隐藏滚动条. 2s内隐藏比较麻烦,不能用css实现,只能监听容器的touch事件,然后给滚动条加个opacity: 0的class. .class::-w ...

  7. css中渐变的分割线和自定义滚动条样式

    css中渐变的分隔线: <div style="background:linear-gradient(to left,#efefef,#b6b6b6,#efefef);height:1 ...

  8. 使用css实现无滚动条滚动+使用插件自定义滚动条样式

    使用css实现无滚动条滚动,摘抄自:曹小萌博客 使用css实现无滚动条滚动,大体思路是在div外面再套一个div.这个div设置overflow:hidden.而内容div设置 overflow-x: ...

  9. CSS3自定义滚动条样式-webkit内核

    自定义滚动条实现 此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit ...

  10. CSS004. 自定义滚动条样式(webkit)

    CSS /* 滚动条宽度 */ ::-webkit-scrollbar { width: 6px; } /* 轨道样式 */ ::-webkit-scrollbar-track { backgroun ...

随机推荐

  1. CSRF攻击原理以及防御

    一.CSRF是什么? CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/session riding,缩写为:CSR ...

  2. (十)Linux 网络编程之ioctl函数

    1.介绍 Linux网络程序与内核交互的方法是通过ioctl来实现的,ioctl与网络协议栈进行交互,可得到网络接口的信息,网卡设备的映射属性和配置网络接口.并且还能够查看,修改,删除ARP高速缓存的 ...

  3. php注意事项2

    1.不要使用相对路径 常常会看到: require_once('../../lib/some_class.php'); 该方法有很多缺点: 它首先查找指定的php包含路径, 然后查找当前目录. 因此会 ...

  4. 由两点坐标如何画出直线 matlab

    由两点坐标如何画出直线  方法1:利用直线方程 斜率加截距 方法2:数据拟合 %由两点坐标得数据拟合直线与画线 x = [,]; y = [,]; k = ((-)/(-));% 由两点坐标得到直线斜 ...

  5. 在centos7上作用mongodb

    安装服务端 yum install mongodb-server 安装客户端 yum install mongodb 版本 mongo --version 是否安装了mongodbwhich mong ...

  6. Caché数据库学习笔记(3)

    目录 Query函数及其测试 重建索引表 Management portal简介 远程访问Ensemble ============================================== ...

  7. session没有过期,其保存的数据无故丢失的原因

    问题: 我们经常会做到的一个功能,将登录用户信息保存到session中,在页面上显示登录用户名.但是,如果很短时间内甚至几秒没有刷新这个页面的话,这个用户名就消失了,其实就是session中保存的用户 ...

  8. Windows与Linux主机之间的连接和交互工具

    1.Putty 远程连接Linux主机 Windows主机上安装putty,工具打开后显示如下: 输入要连接的Linux主机的IP地址,点击Load,连接主机后输入用户名密码,即可登录Linux主机 ...

  9. 使用ASP.NET 上传文件 三种类型判断方法(后缀,MIME,数据流)

    #region 一. 安全性比较低,把文本文件1.txt改成1.jpg照样可以上传,但其实现方法容易理解,实现也简单,所以网上很多还是采取这种方法. Boolean fileOk = false; s ...

  10. 获取数据库里面最新的ID

    你如果新插入的一段资料,你想获取它的ID,就用   “mysql_insert_id()”; 并且要重新定义一个名称