css之-webkit-scrollbar
在IE中可以自定义滚动条的样式 ,基于webkit的浏览器现在也可以自定义其样式:
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
border:1px solid #666666
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
.test{
width:100px;
height:200px;
overflow:scroll;
border:1px solid #666666;
}
<div class="test">kfalsdfjlasjldf</div>
参考:
http://www.webkit.org/blog/363/styling-scrollbars/
http://css-tricks.com/9130-custom-scrollbars-in-webkit/
http://www.spectrum-research.com/V2/projects_scrollbar_generator.asp
css之-webkit-scrollbar的更多相关文章
- WebKit的CSS扩展(WebKit是私有属性)
http://www.css88.com/webkit/-webkit-touch-callout/ -webkit-tap-highlight-color 是一个 不规范的属性(unsupporte ...
- 【WebKit】---WebKit的CSS扩展(WebKit是私有属性)
1.-webkit-touch-callout 当你触摸并按住触摸目标时候,禁止或显示系统默认菜单.在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的系统默认菜单. ...
- css去除webkit内核的默认样式
做移动端的朋友应该知道,iphone的默认按钮是个很恶心的圆角,select下拉框也有默认样式无法修改. 这时候可以用到 -webkit-appearance:none //去除默认样 在按钮和sel ...
- js 浏览器兼容css中webkit、Moz、O、ms...写法封装(es6语法)
/** *浏览器兼容写法封装 */ let elementStyle = document.createElement('div').style let vendor = (() => { le ...
- [CSS] Showing horizontal scrollbar always for the table
table { display: block; overflow: scroll; width: 200px; height:95vh; }
- webkit内核浏览器的CSS写法
-webkit-tap-highlight-color: transparent; Mobile上点击链接高亮的时候设置颜色为透明 -webkit-user-select: none; 设置为无法选择 ...
- Webkit内核探究【2】——Webkit CSS实现
注:[转载请注明文章来源.保持原样] 出处:http://www.cnblogs.com/jyli/archive/2010/01/31/1660364.html 作者:李嘉昱 CSS在Webkit中 ...
- Webkit内核探究【2】——css简介
注:[转载请注明文章来源.保持原样] 出处:http://www.cnblogs.com/jyli/archive/2010/01/31/1660364.html 作者:李嘉昱 CSS在Webkit中 ...
- webkit
HTML, 从HTML文档的开始到结束排列: <meta name="viewport" content="width=device-width, initial- ...
- 理解WebKit和Chromium(电子书)
前言 基础篇 WebKit, WebKit2, Chromium和Chrome介绍 WebKit和Blink WebKit和Chromium代码目录结构介绍 WebKit和Chromium功能模块 ...
随机推荐
- PreparedStatement用途
关于PreparedStatement接口,需要重点记住的是:1. PreparedStatement可以写参数化查询,比Statement能获得更好的性能.2. 对于PreparedStatemen ...
- java.lang.SecurityException:Servlet of class org.apache.catalina.servlets.InvokerServlet is privileged
转自:http://www.cnblogs.com/orientsun/archive/2012/11/04/2753270.html Error: java.lang.SecurityExcepti ...
- mysql trigger 触发器
创建触发器: CREATE [DEFINER = {user|CURRENT_USER}] TRIGGER trigger_name trigger_time trigger_event ON tbl ...
- SSH登录详解
1.什么是SSH登录 SSH是一种网络协议,用于计算机之间的加密登录. 相比传统的账户密码登录,SSH提供了一种更便捷安全的登录方式. 2.SSH登录流程 登录操作如下 ssh user@host S ...
- 每日英语:The Delicate Protocol Of Hugging
I'm not a hugger. When I see a registered personal-space invader coming my way at a party, the music ...
- 【C/C++】深入理解指针和数组的关系
对数组名进行取地址运算 ,,}; ] = &a; //注意左值 对数组名取地址,得到的指针为指向整个数组的指针. 形参数组 形参为数组时勿须带数组长度,因为计算机不会处理,如果需要传数组长度, ...
- 安装pydiction
pydiction用来实现代码补全和语法提示功能.pydiction不能通过apt安装,需要自行下载安装. 在GitHub下载源码,可以使用Git迁出到本地,或者下载zip包自行解压,地址为:http ...
- 将本地代码同步到远程github上
1.在本地文件夹下建立.gitignore文件,将github下的github/gitignore/Node.gitignore文件复制到.gitignore中: 2.执行命令git add . 3. ...
- 搜索页面scroll下拉时候进行刷新,显示更多搜索值
1.封装扩展scroll.vue功能: //props传值 pullup:{ type:Boolean, default:false } _initScroll(){ if(!this.$refs.w ...
- Lintcode: Interleaving Positive and Negative Numbers 解题报告
Interleaving Positive and Negative Numbers 原题链接 : http://lintcode.com/zh-cn/problem/interleaving-pos ...