使用css自定义滚动条样式

一. 隐藏滚动条二. 修改滚动条样式Chrome（WebKit的浏览器）IE浏览器

一. 隐藏滚动条

谷歌浏览器.box::-webkit-scrollbar{ display: none; } IE浏览器.box{ -ms-overflow-style: none; }

二. 修改滚动条样式

Chrome（WebKit的浏览器）

可以使用以下伪元素选择器去修改webkit浏览器的滚动条样式：

属性说明::-webkit-scrollbar滚动条整体部分::-webkit-scrollbar-track外层轨道（滚动条的轨道）::-webkit-scrollbar-track-piece内层轨道::-webkit-scrollbar-track-thumb滚动条里面的滑块::-webkit-scrollbar-track-button滚动条的轨道的两端按钮::-webkit-scrollbar-track-corner边角，即两个滚动条的交汇处 轨道的颜色的优先级，即： ::-webkit-scrollbar-track-piece > ::-webkit-scrollbar-track > ::-webkit-scrollbar使用语法：box::-webkit-scrollbar { styles here }

IE浏览器

属性说明scrollbar-base-color滚动条基准颜色scrollbar-highlight-color滚动条整体颜色scrollbar-track-color滚动条轨道颜色scrollbar-arrow-color三角箭头的颜色scrollbar-face-color滚动条滑块按钮的颜色scrollbar-shadow-color滚动条阴影 使用语法.box{ /*滚动条基准颜色*/ scrollbar-base-color: green; /*滚动条整体颜色*/ scrollbar-highlight-color: blue; /*滚动条轨道颜色*/ scrollbar-track-color: yellow; /*三角箭头的颜色*/ scrollbar-arrow-color: white; /*滚动条滑块按钮的颜色*/ scrollbar-face-color: red; /*滚动条阴影*/ scrollbar-shadow-color: red; }