//血槽宽度
::-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. 手动创建script解决跨域问题(jsonp从入门到放弃)

    vue项目一般用axios代替jQuery发送ajax请求,但是不支持jsonp格式,需要安装jsonp的依赖包,这就很不爽了,能自己轻易实现的,为什么要引乱七八糟的插件.jsonp其实就是利用< ...

  2. php判断是不是移动设备

    <?php function isMobile() {     // 如果有HTTP_X_WAP_PROFILE则一定是移动设备     if (isset ($_SERVER['HTTP_X_ ...

  3. ubuntu执行sudo apt-get update 时出现的错误及解决办法

    一.错误描述 W: GPG error: http://ppa.launchpad.net/fkrull/deadsnakes/ubuntu xenial InRelease: The followi ...

  4. 使用excel开发平台活字格搭建物流管理系统

    物流管理系统是指包含完整的物流公司信息.物流寄件信息.物流运输信息以及物流寄件单位等管理系统.功能完善的物流管理系统,能帮助物流企业更好的进行物流管理. 下面我们借助活字格,来设计一个简单的物流管理系 ...

  5. ActiveReports 报表应用教程 (12)---交互式报表之贯穿钻取

    在葡萄城ActiveReports报表中提供强大的数据分析能力,您可以通过图表.表格.图片.列表.波形图等控件来实现数据的贯穿钻取,在一级报表中可以通过鼠标点击来钻取更为详细的数据. 本文展示的是20 ...

  6. AOP编程 - 淘宝京东网络处理

    现象描述 当我们打开京东 app 进入首页,如果当前是没有网络的状态,里面的按钮点击是没有反应的.只有当我们打开网络的情况下,点击按钮才能跳转页面,按照我们一般人写代码的逻辑应该是这个样子: /** ...

  7. Linux —— Vi 命令介绍

    简介 vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器. 这里只是简单地介绍一下它的用法和一小部分指令. 由于对Unix及Linux系统的任何版本,vi编辑 ...

  8. 基于MD5的增强型摘要算法

    message-digest algorithm 5(信息-摘要算法),md5的长度,默认为128bit,也就是128个0和1的二进制串.但是,这样表达是很不友好的,所以将二进制转成了16进制,每4个 ...

  9. Azure 中虚拟机的计划内维护

    Azure 定期执行更新,以提高虚拟机的主机基础结构的可靠性.性能及安全性. 此类更新包括修补宿主环境(例如操作系统.虚拟机监控程序以及主机上部署的各种代理)中的软件组件.升级网络组件以及硬件解除授权 ...

  10. Oracle EBS OPM 发放生产批

    --发放生产批 --created by jenrry DECLARE x_return_status VARCHAR2 (1); l_exception_material_tbl gme_commo ...