css 修改浏览器滚动条样式（火狐Firefox，谷歌google）

一、修改谷歌google：

修改样式：

1.全局修改，所有滚动条生效：

::-webkit-scrollbar{width:6px;height:6px;

    background-color: #00000040;

}

::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,1);border-radius:10px;}

::-webkit-scrollbar-track{background-color:transparent; }

2.针对某个容器来修改：

.mainPannel::-webkit-scrollbar{width:4px}
.mainPannel::-webkit-scrollbar-track{background-color:#ccc;}
.mainPannel::-webkit-scrollbar-thumb{background-color:#666;}

隐藏滚动条：

/* H5的时候，隐藏滚动条 */

// ::-webkit-scrollbar {

//  display: none;  

//  width: 0 !important;  

//  height: 0 !important;  

//  -webkit-appearance: none;  

//  background: transparent;  

// }

二、修改火狐Firefox：

修改火狐滚动条样式的css属性只有 scrollbar-color 和 scrollbar-width 。

scrollbar-color: auto; /* 使用浏览器默认的滚动条样式 */

scrollbar-color: dark; /* 使用浏览器默认的深色或者黑色滚动效果 */

scrollbar-color: light; /* 使用浏览器默认的浅色滚动效果 */

scrollbar-color: red #00f; /* 第一个颜色为滚动条的颜色， 第二个颜色为滚动条轨道的颜色 */

scrollbar-width: auto; /* 使用浏览器默认的滚动宽度 */

scrollbar-width: thin; /* 设置比默认滚动条宽度更窄的宽度 */

scrollbar-width: none; /* 隐藏滚动条，但是元素还是可以滚动 */

scrollbar-width: 66px; /* 直接设置滚动条的宽度，比如 60px 3vh 4wh 5rem 6rm 等长度 */

修改宽度（高度）如果单位是px，我尝试的时候好像并不会生效，只有auto、thin、none，不知道是不是官方取消了。

隐藏滚动条：

scrollbar-width: none;        //添加到overflow的节点上。