chrome滚动条样式修改
对于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);
}
chrome滚动条样式修改相关推荐
- el-table滚动条样式修改
我们知道,el-table滚动条样式默认取的好像是我们全局滚动条的样式,当我们修改了全局滚动条的样式后,table表格的滚动条样式也随之而变. 比如,当我们修改了全局滚动条的样式,使其变得窄一点 // ...
- 自定义Chrome 滚动条样式
有不少可以帮你修改Chrome默认滚动条样式的扩展,Scroll Bar X就是其中的佼佼者,但是这个扩展在安装的时候提示说会存取所有的网站数据,这就让人感觉很难以接受了.其实咱们可以自己动手,丰衣足 ...
- html5滚动条样式修改,css修改滚动条样式
在css中怎样改变滚动条的样式 /*IE滚动条颜色设置*/body {scrollbar-arrow-color:#f2f2f3;/*上下箭头*/scrollbar-track-color:#1589 ...
- element-ui 滚动条样式修改
element ui的 滚动条样式很难看 这是修改全局的滚动条样式 可以添加一下代码 /**修改全局的滚动条*/ /**滚动条的宽度*/ ::-webkit-scrollbar {width: 8p ...
- CSS 滚动条样式修改(详细)
1.滚动条整体部分 使用 ::-webkit-scrollbar 示例: .container::-webkit-scrollbar {width: 20px;//修改滚动条宽度 } 2.滚动条中的滑 ...
- css 滚动条样式修改以及动态显示
限定高度并overflow:auto时,溢出滚动时,滚动条出现,对滚动条的样式修改,并只有当鼠标经过时才显示,代码如下 .plan::-webkit-scrollbar {transition: al ...
- 滚动条css圆角兼容ie,ie浏览器滚动条样式修改
用css怎样定义IE滚动条的样式 .testDiv{ border-style:solid; border-width:50px; border-color:pink; position:absolu ...
- element-ui table 滚动条样式修改
先看效果: 思路:使用 css 样式修改滚动条 <!-- 局部样式修改 element-table --> <style>/* 整体样式 */.el-table__body-w ...
- element-ui滚动条样式修改
* 表单高度超出设置的长度时会出现滚动条展示:.el-table__body-wrapper {height: 60rem; //设置固定高度overflow-y: auto; //超出显示滚动条 } ...
最新文章
- 判断一个变量类型是数组还是对象
- 关于嵌入式系统内存地址空间的一些疑问(.text、.data、.bass、堆\栈空间)
- 解决FusionCharts联动的中文乱码.
- 将信号量代码生成静态库以及动态库
- Spring Boot 案例:连接后台数据库实现用户登录
- Java Socket 编程
- (day 11 - 模拟)剑指 Offer 29. 顺时针打印矩阵
- NCC项目搭建及版本管理规范手册
- 浩海技术GHOSTXPSP3_2010浪漫圣诞纯净版
- 计算机处理器性能排名,电脑处理器性能排行榜
- 解决win8 64位版本下无法使用debug
- revit 转换ifc_将IFC转换成GLTF格式
- UE4中实现Cesium 3dtileset的压平
- 详解【java实现】编写一个程序,从键盘读入一段英文(多行),找出其中所有的英文单词,统计每个单词出现的次数,并按照单词出现次数由大到小排序后输出。
- 面对工业4.0,我国工业企业的挑战与对策
- 工业现场云解决方案的设计与实践
- 天猫手机卖到第一:手机厂在想什么
- 微信小程序实现下拉分页加载更多数据
- 【MySQL】# mysql计算两个时间的差值
- php支持连接sql server数据库