纯CSS改变webkit内核浏览器的滚动条样式


Posted in HTML / CSS onApril 17, 2014

基于webkit的浏览器现在可以自定义其滚动条的样式了,实现代码如下:

复制代码
代码如下:

::-webkit-scrollbar/*整体部分*/
{
width: 10px;
height:10px;
}

::-webkit-scrollbar-track/*滑动轨道*/
{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0px;
background: rgba(0,0,0,0.1);
}

::-webkit-scrollbar-thumb/*滑块*/
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb:hover/*滑块效果*/
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.4);
}

效果:
纯CSS改变webkit内核浏览器的滚动条样式

HTML / CSS 相关文章推荐
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
Sep 08 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 #HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 #HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 #HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 #HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 #HTML / CSS
css3新增颜色表示方式分享
Apr 15 #HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 #HTML / CSS
You might like
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
PHP三元运算符的结合性介绍
2012/01/10 PHP
php 定义404页面的实现代码
2012/11/19 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
详解VUE 数组更新
2017/12/16 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
Koa 使用小技巧(小结)
2018/10/22 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
国际经济贸易专业推荐信
2013/11/06 职场文书
高中美术教学反思
2014/01/19 职场文书
读书演讲主持词
2014/03/18 职场文书
保险内勤岗位职责
2014/04/05 职场文书
门市房租房协议书
2014/12/04 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
培训简讯范文
2015/07/20 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
Minikube搭建Kubernetes集群
2022/03/31 Servers