webkit内核-滚动条样式修改，火狐-flex布局下overflow不生效解决，滚动条样式隐藏

针对webkit内核的浏览器（谷歌、ie、Safari等）：

实现效果：

（利用border实现边距）

使用伪类改变滚动条样式

1. ::-webkit-scrollbar 滚动条整体

2. ::-webkit-scrollbar-thumb 滚动条的方块

3. ::-webkit-scrollbar-track 滚动条的轨道

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

5. ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分

6. ::-webkit-scrollbar-corner 边角，即垂直滚动条和水平滚动条相交的地方

 /*修改滚动条样式*/
  div::-webkit-scrollbar {
    width: 15px;
    height: 15px;
  }
  div::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  div::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 7px;
    height: 50px;
    border: 4px solid #f1f1f1;
  }
  div::-webkit-scrollbar-track-piece {
    width: 10px;
  }
  div::-webkit-scrollbar-thumb:hover {
    background: #dddddd;
  }
  div::-webkit-scrollbar-corner {
    background: #dddddd;
  }

对于火狐浏览器

首先踩了一个坑：flex布局下面overflow不生效，网上找了资料看，发现也不能解决，所以最后直接改变实现的思路

既然flex和overflow不能写一起，那我就把这个拆开来写

 本来的样式：

.xxx {
    flex-direction: column-reverse;
    display: flex;
    overflow-y: auto;
    height: vw(480);
    width: vw(192);
}

修改成：

.xxx {
    overflow-y: auto;
    height: vw(480);
    width: vw(192);
    .xxxxxxx {
        overflow-y: hidden;
        flex-direction: column-reverse;
        display: flex;
        min-height: vw(480);
}

接下来解决火狐滚动条样式问题：

// 火狐滚动条直接隐藏 火狐滚动条不能修改样式
  overflow-y: scroll;
  scrollbar-color: transparent transparent;
  scrollbar-track-color: transparent;
  -ms-scrollbar-track-color: transparent;