css修改浏览器滚动条样式（兼容IE，Chrome，Firefox）_MYG_G的博客-程序员秘密

技术标签： css

IE

写法：写在overflow同级的位置，由于在IE下transparent无效，故将滚动条置为页面背景色，以此规避丑丑的滚动条样式。

这几个属性文档说是兼容IE5.5，亲测IE11可以，低版本未测试。

用以下几个属性组合，就可以将滚动条变得和背景色一样：

scrollbar-arrow-color: color; /*三角箭头的颜色*/
scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/
scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/
scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
scrollbar-track-color: color; /*立体滚动条背景颜色*/
scrollbar-base-color:color; /*滚动条的基色*/

Chrome

写法：写在overflow同级的样式下面，博主是react + less,写法如下。

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
&::-webkit-scrollbar  
{
      
    width: 16px;  /*滚动条宽度*/
    height: 16px;  /*滚动条高度*/
}  
  
/*定义滚动条轨道 内阴影+圆角*/  
&::-webkit-scrollbar-track  
{
      
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  /*滚动条的背景区域的圆角*/
    background-color: red;/*滚动条的背景颜色*/  
}  
  
/*定义滑块 内阴影+圆角*/  
&::-webkit-scrollbar-thumb  
{
      
    border-radius: 10px;  /*滚动条的圆角*/
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: green;  /*滚动条的背景颜色*/
}

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处的小方块
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

Firefox

原理：写在overflow同级的位置，如下图：

	  overflow: scroll;
      scrollbar-color: red red; //滚动条轨道颜色   滚动条滑块的颜色
      scrollbar-width: none;
	  scrollbar-width: thin;     //thin模式下滚动条两端的三角按钮会消失
	  scrollbar-width: auto;    //默认大小

本文链接：https://blog.csdn.net/qq_40657321/article/details/107048384

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

windows无法打开添加打印机_打印机共享常见问题汇总_weixin_39746382的博客-程序员秘密

双机打印机的共享问题 1．工作站的网上邻居无法浏览到提供共享打印服务的主机。 2．工作站上无法浏览网上邻居 3．工作站搜索不到共享打印机 4．原来可以共享打印，今天所有工作站突然不能打印，如果添加打印机的话，找不到那台主机上的打印机. 访问那台主机需要密码，点击已经安装的打印机，显示无权访问。解决Win XP打印共享问题在进行共享...

身份鉴别_sparename的博客-程序员秘密

身份鉴别1、身份鉴别基础2、基于实体所知的鉴别3、基于实体所有的鉴别4、基于实体特征的鉴别5、 kerberos体系6、认证、授权和计费1、身份鉴别基础◆理解标识与鉴别的区别、鉴别类型、鉴别方式等◆基本概念◆了解对身份鉴别系统的主要要求身份鉴别的概念◆标识◆实体身份的一种计算机表达◆每个实体与计算机内部的一个身份表达绑定◆信息系统在执行操作时，首先要求用户标识自己的身份，并提供证明自己身份的依据，不同的系统使用不同的方式表示实体的身份，同一个实体可以有多个不同的身份◆标识示例◆用户ID

《图说VR入门》——360全景视频_cartzhang的博客-程序员秘密

本文章由cartzhang编写，转载请注明出处。所有权利保留。文章链接：http://blog.csdn.net/cartzhang/article/details/53674647 作者：cartzhang《图说VR入门》——360全景视频本章用使用较早的Unity OC 插件来实现一个360全景视频，且通过使用不同的路径配置，可以随意切换视频内容。这样省去了多次打包的过程，简单易用。

Android中的Drawable_renbinyu2的博客-程序员秘密

Android中有DrawableDrawable表示的是一种可以在Canvas上绘制的抽象的概念，它的种类有很多，都表示一种图像的概念，但又不全是图片，通过颜色也可以构造出各种各样的图像的效果。Drawable的内部宽度参数比较重要，通过getIntrinsicWidth和getIntrinsicHeight可以获取到它们。但不是每个Drawable都有内部宽高，比如一张图片所形成的Drawable，它的内部宽高就是图片的宽高，而一个颜色所形成的Drawable，它就没有内部宽高，如果调用getInt

WAS集群系列（3）：集群搭建：步骤1：准备文件_weixin_30291791的博客-程序员秘密

说明：“指示轨迹”为“点选顺序”，截图为点击后效果截图环境项目点指标WAS版本号7.0操作系统Windows 2008 系统位数64bit内存2GWAS绝对路径D:\IBM\WebSphere\AppServer步...

mui --- 怎么获取百度地图定位功能_weixin_30776545的博客-程序员秘密

<!doctype html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initi...