chrome滚动条样式修改
来源:互联网 发布:ubuntu core 16 pi3 编辑:程序博客网 时间:2024/05/20 20:43
对于chrome浏览器,它提供了修改滚动条样式的接口,开发者只需要加上几句css脚本,就可轻松实现滚动条样式的修改.
先说一下滚动条的参数:
::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 10px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #bbb;
-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);
}
阅读全文
0 0
- chrome滚动条样式修改
- chrome滚动条样式
- [分享] 通过修改CSS自定义chrome滚动条样式
- 滚动条样式修改
- 滚动条样式-IE,chrome
- 滚动条样式-IE,chrome
- 修改chrome 滚动条颜色
- 修改IE滚动条样式
- 修改滚动条的样式
- 修改浏览器滚动条样式
- 修改浏览器滚动条样式
- 修改默认滚动条样式
- 修改默认滚动条样式
- CSS滚动条样式修改
- 滚动条样式的修改
- Ext中修改滚动条样式
- QT修改默认的滚动条样式
- web页面滚动条样式修改
- laravel 生成 sitemap
- spring实战-基于注解的面向切面编程(AOP)
- Visual Tracking Papers and Researchers
- 【状态压缩dp】HDU
- 变幻的矩阵
- chrome滚动条样式修改
- 面试 链表逆置
- CSS 鼠标手指样式整理
- 扫描线——求矩形混合面积——poj 1151 Atlantis
- 【DP 随想】
- Struts2 如何获取Request,Session对象
- 2017"百度之星"程序设计大赛
- 剑指offer——17.树的子结构
- Elasticsearch系列(一)----Elasticsearch简介