css滚动条外层轨道颜色不对,滚动条滚动时显示，不滚动时隐藏

像滚动条的控制样式我们基本知道，看下：

::-webkit-scrollbar // 滚动条整体部分，可以设置宽度啥的

::-webkit-scrollbar // 滚动条整体部分，可以设置宽度啥的

::-webkit-scrollbar-button // 滚动条两端的按钮

::-webkit-scrollbar-track // 外层轨道

::-webkit-scrollbar-track-piece // 内层滚动槽

::-webkit-scrollbar-thumb // 滚动的滑块

::-webkit-scrollbar-corner // 边角

::-webkit-resizer // 定义右下角拖动块的样式

针对不同的浏览器，有不同的隐藏滚动条的方法，以下针对三大浏览器 chrome、ie(包括 edge)、firefox 分别叙述之：

Chorme

body::-webkit-scrollbar {

display: none;

}

IE/Edge

body {

-ms-overflow-style: none;

}

Firefox

firefox 是三者之中最麻烦的：

html {

/*注意！若只打 hidden，chrome 的其它 hidden 会出问题*/

overflow: -moz-hidden-unscrollable;

height: 100%;

}

body {

height: 100%;

/*浏览器滚动条的长度大约是 18px*/

width: calc(100vw + 18px);

overflow: auto;

}

到此还没结束，你还要在一些地方加上width: 100vw;。

假设你的HTML长这样：

山有木兮木有枝，心悦君兮君不知。