//血槽宽度
::-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. Linux常用基本命令(split )

    split命令 作用:切割文件 格式: split [option] [input] [prefix] -l 指定分割后文件的最大行数 ghostwu@dev:~/linux/split$ cat - ...

  2. Codeforces35E(扫描线)

    E. Parade time limit per test:2 seconds memory limit per test:64 megabytes input:input.txt output:ou ...

  3. 【代码笔记】iOS-自定义loading

    一,效果图. 二,工程图. 三, 代码. ViewController.h #import <UIKit/UIKit.h> //loading #import "GPLoadin ...

  4. 【读书笔记】iOS-网络-异步请求与运行循环

    异步请求需要运行循环.当数据传递到服务器或是被客户端接收时,运行循环用于实现事件与委托对象之间的通信.异步请求在发出时,会在当前线程的运行循环上操作,这个实现细节是很重要的,因为在GCD块中或者是通过 ...

  5. java中return、break、continue的区别

    1.return @Testpublic void testReturn(){ for (int j = 1; j < 3; j++) { for (int i = 1; i < 5; i ...

  6. 借助form表单向web服务器发送消息

    form表单是常用的,在网页浏览器中 用户点击的请求经htto协议发送回web容器,请求处理 建立用户的页面 <!DOCTYPE html> <html> <head&g ...

  7. 如何扩展Linux虚拟内存文件系统

    由于ArcGIS GeoAnalystics Server和Raster Analytics Server大数据分析平台都是基于Spark分析平台的,其部署服务器除了要求具有高内存特点外,也需要确保相 ...

  8. VS 2015 报错 " 'unistd.h': No such file or directory" 的解决办法

    使用 Visual Studio 2015 进行程序开发工作时,如果编译的是来自于Linux平台的源文件,该源文件可能会包含头文件 uninstd.h,这样会产生报错信息: "fatal e ...

  9. 【葡萄城报表】还在为画“类Word文档报表”而发愁吗?

    ​Word 是非常强大的文档编辑工具,一些行业制式文档都是使用Word来创建的,像教育行业的申请表,履历表,审批表等,像石油业的勘探记录表,记录报告,检测报告等,如房地产业的制式合同,不仅包含大量的文 ...

  10. JavaScript判断变量名是否存在数组中

    直接上代码: JavaScript代码: var array=[{name:"张珊",sex:"男"}]; console.log(array); if(arr ...