css修改滚动条样式及隐藏滚动条实现

前端书写样式的时候经常需要修改浏览器默认滚动条，以下两种方法能够解决大部分情况下的UI需求。

修改滚动条样式

.scroll-container{
  height: 100%;
  overflow-y: scroll;
  &::-webkit-scrollbar{
    width: 4px;
    height: 100%;
  }
  div::-webkit-scrollbar-track{
    background: transparent;
    border-radius: 2px;
  }
  &::-webkit-scrollbar-thumb  {
    background: rgba(160, 160, 160, 0.5);
    border-radius: 2px;
  }
}

隐藏滚动条

scrollbar-width: none; //兼容火狐
-ms-overflow-style: none; //兼容IE10+
&::-webkit-scrollbar {
  display: none //兼容chrome
}