css修改谷歌浏览器和火狐浏览器的滚动条样式

css代码

谷歌浏览器滚动条样式：

::-webkit-scrollbar {background: #f7f7f9;width: .08rem; /* 纵向滚动条滑块宽度 */height: .09rem; /* 横向滚动条滑块宽度 */}::-webkit-scrollbar-track-piece { /*滚动条背景颜色*/background: #f7f7f9;}::-webkit-scrollbar-thumb { /* 滑块 */border-radius: .1rem;background: #e5e5e5;}// 也可以单独设置横向滚动条和纵向滚动条的背景颜色::-webkit-scrollbar-thumb:vertical { /* 纵向滑块 */background: #e5e5e5;}::-webkit-scrollbar-thumb:horizontal { /* 横向滑块 */background: #e5e5e5;}

火狐浏览器滚动条样式：

* {scrollbar-color: #e5e5e5 #f7f7f9; /* 滑块颜色 滚动条背景颜色 */scrollbar-width: thin; /* 滚动条宽度有三种：thin、auto、none */}

效果图

谷歌浏览器效果

火狐浏览器效果

其他浏览器

IE浏览器都不支持这些属性，所以在IE浏览器下滚动条没办法用css设置，其他浏览器暂时没试过，大家可以自己尝试。