纯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 相关文章推荐
利用CSS3实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
CSS3教程(7):CSS3嵌入字体
Apr 02 HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
Mar 10 HTML / CSS
css3的transform中scale缩放详解
Dec 08 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
使用CSS连接数据库的方式
Feb 28 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时间不正确的解决方法
2008/04/09 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
php实现文章评论系统
2019/02/18 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
vue项目实现多语言切换的思路
2020/09/17 Javascript
讲解Python中的递归函数
2015/04/27 Python
python协程用法实例分析
2015/06/04 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
.NET面试问题集
2015/12/08 面试题
农村结婚典礼司仪主持词
2014/03/14 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
戒赌保证书
2015/05/11 职场文书
小学生手册家长意见
2015/06/03 职场文书
一文搞懂php的垃圾回收机制
2021/06/18 PHP