纯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+Js制作漂亮时钟(附源码)
Apr 24 HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
Jul 04 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
May 21 HTML / CSS
纯html+css实现Element loading效果
Aug 02 HTML / CSS
分享几个实用的CSS代码块
Jun 10 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常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
零基础php编程好学吗
2019/10/11 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
ext 代码生成器
2009/08/07 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
python插入排序算法实例分析
2015/07/03 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
python查看数据类型的方法
2019/10/12 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
python实现图像全景拼接
2020/03/27 Python
keras导入weights方式
2020/06/12 Python
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
高中生学习总结的自我评价范文
2013/10/13 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
小学生评语集锦
2014/04/18 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
党员作风建设自查报告
2014/10/23 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript