//血槽宽度
::-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-前缀的浏览器修改滚动条样式的更多相关文章

  1. 【前端】webkit内核浏览器DIV滚动条样式修改和设置

    webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...

  2. CSS改变浏览器默认滚动条样式

    前言 最近总是看到某网站滚动条不是浏览器默认样式,而是自定义样式   比如我博客的滚动条,自定义滚动条样式和hover前后的效果 顿时来了兴致和有一个疑问,这是怎么实现的呢? 解决   注:经测试,目 ...

  3. css 溢出滚动条显示,修改滚动条样式

    文本或者内容溢出滚动条显示: a/横纵都出滚动条:css添加属性{overflow:auto;} b/横向滚动条:css添加属性{overflow-x:auto;} c/纵向滚动条:css添加属性{o ...

  4. vue中修改滚动条样式

    这是一个在VUE中的设置滚动条样式的方法,该方法只适用于Chrome浏览器,亲测在火狐不适用 样式写在 APP.vue 中,可以用在全局,如果只用在那个盒子中,只需要在::前面加上盒子的class名就 ...

  5. 在ie和chrome浏览器中滚动条样式的设置

    1.IE下设置滚动条样式的属性 scrollbar-arrow-color: color; /*三角箭头的颜色*/scrollbar-face-color: color; /*立体滚动条的颜色(包括箭 ...

  6. css3修改滚动条样式

    /*滚动条整体样式*/ /*高宽分别对应横竖滚动条的尺寸*/ .content-box::-webkit-scrollbar{ width: 4px; height: 4px; } /*滚动条里面小方 ...

  7. CSS修改滚动条样式

    <div class="qq_bottom">超出部分变滚动条</div> /*//滚动条整体部分*/ .qq_bottom::-webkit-scroll ...

  8. overflow滚动条样式设置,ie和webkit内核

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. CSS3或CSS+JS实现改变滚动条样式(兼容所有浏览器)

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 16px; /*滚动条宽度*/ height: 16px; /*滚动条高度*/ } ...

随机推荐

  1. SpringBoot -- 事件(Application Event)

    Spring的事件为Bean与Bean之间的消息通信提供了支持,当一个Bean处理完一个任务之后,希望另外一个Bean知道并能做相应的处理,这时我们就需要让一个Bean监听当前Bean所发送的事件. ...

  2. C++ 的那些坑 (Day 0)

    C++ 的那些坑 (Day 0) 永远的for循环 其实这里要说的并不是for循环本身还是其中的计数变量的类型的选择. std::string s = "abcd" for (st ...

  3. readlink 命令

    在Linux中readlink命令的作用是:输出符号链接值或权威文件名(通常使用的是-f参数) 格式:readlink [选项]... 文件 参数:   -f, --canonicalize 递归跟随 ...

  4. m6c2g核心板使用笔记

    周立功官网资料下载链接:http://www.zlg.cn/ipc/down/down/id/84.html 平台:致远M6G2C-L Cortex-A7工控核心板 主要参考文档:EPC_loT_M6 ...

  5. EditText的焦点问题

    问题说明: activity中有个三级菜单,三个ListView嵌套,最后一层ListView的item中有EditText控件.要求EditText不仅能手动输入,还能点击加减进行改变.EditTe ...

  6. localStorage/cookie 用法分析与简单封装

    本地存储是HTML5中提出来的概念,分localStorage和sessionStorage.通过本地存储,web应用程序能够在用户浏览器中对数据进行本地的存储.与 cookie 不同,存储限制要大得 ...

  7. python turtle 例子 海归绘图

          太阳花 1 # coding=utf-8 2 import turtle 3 import time 4   5 # 同时设置pencolor="red", fillc ...

  8. Ink——一款使用React风格开发命令行界面应用(CLI App)的nodejs工具

    Github: https://github.com/vadimdemedes/ink Ink introduction: React for CLIs. Build and test your CL ...

  9. 《SQLSERVER2012实施与管理实战指南》前4章节笔记内容

    <SQLSERVER2012实施与管理实战指南>前4章节笔记内容 <SQLSERVER2012实施与管理实战指南>的前面4章是<SQLSERVER企业级平台管理实践> ...

  10. HBase的写事务,MVCC及新的写线程模型

    MVCC是实现高性能数据库的关键技术,主要为了读不影响写.几乎所有数据库系统都用这技术,比如Spanner,看这里.Percolator,看这里.当然还有mysql.本文说HBase的MVCC和0.9 ...