1. //血槽宽度
  2. ::-webkit-scrollbar {
  3. width:8px; height:8px;
  4. }
  5. //拖动条
  6. ::-webkit-scrollbar-thumb {
  7. background-color:rgba(0,0,0,.3);
  8. border-radius:6px;
  9. }
  10. //背景槽
  11. ::-webkit-scrollbar-track {
  12. background-color:#ddd;
  13. border-radius:6px;
  14. }

效果如图

或者使用以下

  1.    .sidebar {
  2. z-index: ;
  3. position: fixed;
  4. left: ;
  5. top: 64px;
  6. overflow-y: auto;
  7. overflow-x: hidden;
  8. background-color: #;
  9. }
  10. .sidebar::-webkit-scrollbar-track { /* 定义滚动条轨道 内阴影+圆角*/
  11. -webkit-box-shadow: inset 6px rgba(, , , 0.3);
  12. border-radius: 5px;
  13. background-color: #f5f5f5;
  14. }
  15.  
  16. .sidebar::-webkit-scrollbar { /*滚动条整体样式*/
  17. width: 10px;
  18. background-color: #f5f5f5;
  19. border-radius: 5px;
  20. }
  21.  
  22. .sidebar::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
  23. border-radius: 5px;
  24. -webkit-box-shadow: inset 6px rgba(, , , 0.3);
  25. background-color: #;
  26. }

支持-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. nginx命令(持续更新)

    关闭服务:nginx -s stop | service nginx stop 启动服务:nginx | service nginx start 重新加载配置文件:nginx -s reload |  ...

  2. python序列函数

    zip:序列并行处理 >>> name=['ghostwu','wukong','bajie'] >>> age=['] >>> sex=['ma ...

  3. js-ES6学习笔记-async函数(2)

    1.async函数返回一个 Promise 对象. async函数内部return语句返回的值,会成为then方法回调函数的参数. async function f() { return 'hello ...

  4. 开源免费的文档协作系统 onlyoffice平台轻松部署

    请移步至此,更详细:http://blog.csdn.net/hotqin888/article/details/79337881 ONLYOFFICE是一个免费的.开源的企业办公套件,用于在线组织团 ...

  5. 安装google,多试试

    对于谷歌Chrome32位版本,使用如下链接: wget https://dl.google.com/linux/direct/google-chrome-stable_current_i386.de ...

  6. 使用postman给servlet传各种参数

    web开发中经常会使用到postman软件,常用的方法涉及到get和post方法去获取对应json数据,get方法直接传url就可以,返回对应json数据.但是post请求就需要json数据提交,而且 ...

  7. Qt与PyQT中设置ToolBar在AllowedArea的显示

    因为个人对传统的软件GUI界面不是太喜欢,最近又在学习Qt和PyQt5,所以就有了设置ToolBar在窗口的不同地方的想法,经过浪里淘沙,最终在Qt官网里找到了,原来再添加toolBar的时候是由设置 ...

  8. MySQL压缩包zip安装

    看了网上好多种教程,自己尝试失败了好多次,最后总算弄好了,具体如下 zip下载地址:https://dev.mysql.com/downloads/mysql/ 之后点击No thanks, just ...

  9. 插入算法---java实现

    插入排序java代码实现 package algorithms.插入排序; import java.io.BufferedReader; import java.io.InputStreamReade ...

  10. PHPStorm 中配置 XDebug

    1.下载 Xdebug ps : php版本和xdebug版本一定要相对应 如果不知道下载哪个版本,将phpinfo网页的源代码拷贝到https://xdebug.org/wizard.php,然后按 ...