隐藏页面元素的滚动条 (横向)

如需设置纵向滚动条    同理  呦

第一种  设置滚动条样式 隐藏 等   （测试中   ios12.4.1手机不生效）

@mixin ScrollHidden{
    display: none;
    background-color:transparent;
    height: 0;
}

.scroll{
  &::-webkit-scrollbar { @include ScrollHidden; }
  &::-moz-scrollbar { @include ScrollHidden; }
  &::-o-scrollbar { @include ScrollHidden; }
  &::-ms-scrollbar { @include ScrollHidden; }

  &::-webkit-scrollbar-thumb { @include ScrollHidden; }
  &::-moz-scrollbar-thumb { @include ScrollHidden; }
  &::-o-scrollbar-thumb { @include ScrollHidden; }
  &::-ms-scrollbar-thumb { @include ScrollHidden; }

  &::-webkit-scrollbar-track { @include ScrollHidden; }
  &::-moz-scrollbar-track { @include ScrollHidden; }
  &::-o-scrollbar-track { @include ScrollHidden; }
  &::-ms-scrollbar-track { @include ScrollHidden; }

  &::-webkit-scrollbar-track-piece { @include ScrollHidden; }
  &::-moz-scrollbar-track-piece { @include ScrollHidden; }
  &::-o-scrollbar-track-piece { @include ScrollHidden; }
  &::-ms-scrollbar-track-piece { @include ScrollHidden; }
}

第二种 设置两个盒子   

第一层盒子设置固定高度  overflow：hidden

第二层可滚动的盒子在原有的高度上 设置padding值，将滚动条 撑出可视区域 ；  利用第一层盒子进行隐藏

.hiddenMain{
  margin: 0 0.1rem;
  height: 0.87rem;
  overflow: hidden;
  border-radius: 0.06rem;
  height: 1.62rem;
}


.scrollMain {
  padding-bottom: 0.2rem;
  overflow-x: auto;
  width: 100%;
}