支持-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; /*滚动条高度*/ } ...
随机推荐
- POJ1458(KB12-L LCS)
Common Subsequence Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 51319 Accepted: 21 ...
- React之函数中的this指向
我们都知道在React中使用函数时,有两种写法,一是回调函数,二是直接调用,但需要在构造函数中绑定this,只有这样,函数中的this才指向本组件 总结一下没有绑定this的函数中的this指向 不管 ...
- 记一次寻找appbug的问题
公司规模 3000人以上 全国500强. 从总部刚交接过来的代码. 1.找不到代码.代码部分丢失.(由于没有交接,没有任何相关文档,花了一天确定代码丢失.从总部找到部分代码) 2.查找测试库,发现测试 ...
- OpenCV 图像特效
1.RGB ->灰度 #灰度 方式1 img=cv2.imread('b.png',0) img1=cv2.imread('b.png',1) height=img1.shape[0] widt ...
- 转:在ASP.NET MVC中通过URL路由实现对多语言的支持
对于一个需要支持多语言的Web应用,一个很常见的使用方式就是通过请求地址来控制界面呈现所基于的语言文化,比如我们在表示请求地址的URL中将上语言文化代码(比如en或者en-US)来指导服务器应该采用怎 ...
- extern “C”的作用详解
extern "C"的主要作用就是为了能够正确实现C++代码调用其他C语言代码.加上extern "C"后,会指示编译器这部分代码按C语言的进行编译,而不是C+ ...
- 0基础的人如何入门 Python ?Python难么?
人生苦短,我用Python,为啥这么说,因为我们自动化测试有金句:学完Python,便可上天 ~ 废话不多说,相信很多人都听过之前的Python进入小学课本.Python进入浙江省高考等新闻,有这么多 ...
- css常见知识点
1.内核区分 希望某一个浏览器能一统江湖 -ms-transform:rotate(7deg); //-ms代表ie内核识别码 -moz-transform:rotate(7deg); //-moz代 ...
- 【Alpha 冲刺】 5/12
今日任务总结 人员 今日原定任务 完成情况 遇到问题 贡献值 胡武成 建立数据库 未完成 设计表结构的时候,有些逻辑没有设计好,重新review一番设想的功能才初步确定表结构 孙浩楷 根据UI设计, ...
- [pip] pip命令的安装、卸载、查找方法汇总
比如以selenium的为例 1.打开命令窗口(如果是win10,最好是通过管理员方式打开命令窗口,否则会出现安装时提示访问不拒绝) 2.安装selenium的指定版本,命令:pip install ...