CSS - 使用css自定义滚动条样式

一. 隐藏滚动条

• 谷歌浏览器

  .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;
  }