//血槽宽度
::-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. PHP 基础总结

    PHP(Hypertext Preprocessor)是一种被广泛应用的开源通用脚本语言,尤其适用于Web开发.可用于服务端脚本.命令行脚本.桌面应用程序三大领域. PHP 的 SAPI(服务器应用程 ...

  2. <Android 基础(三十五)> RecyclerView多类型Item的正确实现姿势

    简介 RecyclerView是我们开发过程中经常使用到的一个元素,原生的RecyclerView.Adapter基本上可以满足一般的需求,关于RecyclerView的基础介绍请移步: Recycl ...

  3. 语义SLAM的数据关联和语义定位(三)

    与现有方法的异同 特征点SLAM中的数据关联 先回忆一下特征点SLAM中,我们是如何处理数据关联的.下面以ORBSLAM为例. 在初始化部分,我们通过特征描述子的相似性,建立两帧之间的特征点关联,然后 ...

  4. describe命令

    describe简写是desc 表 desc t1; desc t1 column1; desc extended t1; desc formatted t1; 数据库 desc database t ...

  5. 用例设计之APP用例覆盖准则

    基本原则 本文主要讨论APP功能用例的覆盖,基本原则: 用户场景闭环(从哪来到哪去) 遍历所有的实现逻辑路径 需求点覆盖 覆盖维度 APP功能用例设计主要使用传统的黑盒用例设计方法.同时,作为移动AP ...

  6. Cordova-conifg.xml配置

    DisallowOverscroll 布尔值,默认false.如果不想要WebView出现橡皮筋滚动条,则设置为true TopActivityIndicator   字符串值,默认gray.设置顶部 ...

  7. 使用 Chef 自动执行 Azure 虚拟机部署

    Chef 是一个强大的工具,用于提供自动化和所需的状态配置. 使用我们的最新 cloud-api 版本,Chef 提供了与 Azure 的无缝集成,使得你能够通过单个命令设置和部署配置状态. 在本文中 ...

  8. SQL Server中数据库文件的存放方式,文件和文件组 (转载)

    简介 在SQL SERVER中,数据库在硬盘上的存储方式和普通文件在Windows中的存储方式没有什么不同,仅仅是几个文件而已.SQL SERVER通过管理逻辑上的文件组的方式来管理文件.理解文件和文 ...

  9. python自学——文件处理(截取文件内容)

    #截断文件内容使用的函数为truncate()来截断文件中的内容# 注意当truncate()括号内没有定义对象时则会删除文件内容:当括号内为指定某个条件时文件会截取从0到指定位置的内容f=open( ...

  10. VScode开发Vue项目,关闭eslint代码检查,以及相关配置

    Vue初始化项目时如果不小心安装了js 语法检测 功能,撸码时一个空格不对就会各种报错 个人感觉这个语法检测功能很有点过于严格,用起来十分难受,所以果断关闭eslint,找到webpack.base. ...