支持-webkit-前缀的浏览器修改滚动条样式
//血槽宽度
::-webkit-scrollbar {
width:8px; height:8px;
}
//拖动条
::-webkit-scrollbar-thumb {
background-color:rgba(0,0,0,.3);
border-radius:6px;
}
//背景槽
::-webkit-scrollbar-track {
background-color:#ddd;
border-radius:6px;
}
效果如图

或者使用以下
.sidebar {
z-index: ;
position: fixed;
left: ;
top: 64px;
overflow-y: auto;
overflow-x: hidden;
background-color: #;
}
.sidebar::-webkit-scrollbar-track { /* 定义滚动条轨道 内阴影+圆角*/
-webkit-box-shadow: inset 6px rgba(, , , 0.3);
border-radius: 5px;
background-color: #f5f5f5;
}
.sidebar::-webkit-scrollbar { /*滚动条整体样式*/
width: 10px;
background-color: #f5f5f5;
border-radius: 5px;
}
.sidebar::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
border-radius: 5px;
-webkit-box-shadow: inset 6px rgba(, , , 0.3);
background-color: #;
}
支持-webkit-前缀的浏览器修改滚动条样式的更多相关文章
- 【前端】webkit内核浏览器DIV滚动条样式修改和设置
webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...
- CSS改变浏览器默认滚动条样式
前言 最近总是看到某网站滚动条不是浏览器默认样式,而是自定义样式 比如我博客的滚动条,自定义滚动条样式和hover前后的效果 顿时来了兴致和有一个疑问,这是怎么实现的呢? 解决 注:经测试,目 ...
- css 溢出滚动条显示,修改滚动条样式
文本或者内容溢出滚动条显示: a/横纵都出滚动条:css添加属性{overflow:auto;} b/横向滚动条:css添加属性{overflow-x:auto;} c/纵向滚动条:css添加属性{o ...
- vue中修改滚动条样式
这是一个在VUE中的设置滚动条样式的方法,该方法只适用于Chrome浏览器,亲测在火狐不适用 样式写在 APP.vue 中,可以用在全局,如果只用在那个盒子中,只需要在::前面加上盒子的class名就 ...
- 在ie和chrome浏览器中滚动条样式的设置
1.IE下设置滚动条样式的属性 scrollbar-arrow-color: color; /*三角箭头的颜色*/scrollbar-face-color: color; /*立体滚动条的颜色(包括箭 ...
- css3修改滚动条样式
/*滚动条整体样式*/ /*高宽分别对应横竖滚动条的尺寸*/ .content-box::-webkit-scrollbar{ width: 4px; height: 4px; } /*滚动条里面小方 ...
- CSS修改滚动条样式
<div class="qq_bottom">超出部分变滚动条</div> /*//滚动条整体部分*/ .qq_bottom::-webkit-scroll ...
- overflow滚动条样式设置,ie和webkit内核
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3或CSS+JS实现改变滚动条样式(兼容所有浏览器)
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 16px; /*滚动条宽度*/ height: 16px; /*滚动条高度*/ } ...
随机推荐
- Three.js开发指南---粒子和粒子系统(第七章)
使用粒子可以很容易的创建很多细小的物体,例如雨滴雪花等 本章主要内容: 1 使用ParticleBasicMaterial(基础粒子材质)来创建和设计粒子 2 使用ParticleSystem来创建一 ...
- 2017萌新的ACM之旅参考代码
地址:https://vjudge.net/contest/180794#overview A #include <iostream> using namespace std; int m ...
- vue中的js引入图片,必须require进来
需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png& ...
- bzoj1758Wc10重建计划——solution
1758: [Wc2010]重建计划 Time Limit: 40 Sec Memory Limit: 162 MBSubmit: 4707 Solved: 1200[Submit][Status ...
- Linux CentOS 6.5 下 vsftpd ftp服务器搭建
Linux CentOS 6.5 下 vsftpd ftp服务器搭建 by:授客 QQ:1033553122 操作系统环境:CentOS 6.5-x86_64 下载地址:http://www.ce ...
- Java语言的特点以及Java与C/C++的异同
Java语言的特点 1. Java为纯面向对象的语言,能够直接反应现实生活中的对象,容易理解,编程更容易. 2.跨平台,java是解释性语言,编译器会把java代码变成中间代码,然后在JVM上解释执行 ...
- redie config 详解
# redis 配置文件示例 # 当你需要为某个配置项指定内存大小的时候,必须要带上单位,# 通常的格式就是 1k 5gb 4m 等酱紫:## 1k => 1000 bytes# 1kb =&g ...
- The attribute required is undefined for the annotation type XmlElementRef
异常描述: 几天没用的项目导进Eclipse中发现有异常 public class BooleanFeatureType extends FeatureBaseType{ @XmlElementRef ...
- 解决MySQL5.6中的Slave延迟问题的基本教程
一.原因分析一般而言,slave相对master延迟较大,其根本原因就是slave上的复制线程没办法真正做到并发.简单说,在master上是并发模式(以InnoDB引擎为主)完成事务提交的,而在sla ...
- Sql Server2008R2下载地址
ed2k://%7Cfile%7Ccn_sql_server_2008_r2_enterprise_x86_x64_ia64_dvd_522233.iso%7C4662884352%7C1DB0252 ...