css 隐藏滚动条并可以滚动内容 ，scss mixin封装

需求是单行横向滚动，滚动条太难看了。

需要靠浏览器提供的css来实现

比如chrome内核的浏览器

::-webkit-scrollbar{
     display: none; /* Chrome Safari */
}

我把这个功能用scss封装了，同时加入firefox和ie浏览器

滚动条的滚动方向我们设置overflow为auto，另一个方向设置为hidden

// 隐藏滚动条
@mixin hide-scrollbar($overflow-x: hidden, $overflow-y: auto) {
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  & {
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: $overflow-x;
    overflow-y: $overflow-y;
  }
}

直接横向隐藏滚动条也进行了封装。

// 横向隐藏滚动条，需要设置当前文本不换行
@mixin hide-scrollbarX() {
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  & {
    white-space: nowrap; //文本不换行
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: auto;
    overflow-y: hidden;
  }
}