一、修改谷歌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的节点上。