CSS—移动端导航横向滑动，并消除横向滚动轴

假设我写了一个导航（div照样适用）

 <ul>
        <li>学习</li>
        <li>学习</li>
        <li>学习</li>
        <li>学习</li>
        <li>学习</li>
        <li>学习</li>
        <li>学习</li>
        <li>学习</li>
 </ul>

第一步：css样式

ul{
        width: 100%;
        height: 76/@r;
        white-space: nowrap;
        overflow-x: scroll;
        // 重点就是white-space 和 overflow-x的设置，
        //white-space是为了不折行
       // overflow-x： scroll是为了出现滚动轴
        display: flex;
        align-items: center;
        padding: 0 30/@r;
        box-sizing: border-box;
        li{
          flex: 1;
          text-align: center;
          margin-right: 50/@r;
        }
      }

但这个时候会发现出现了横向滚动轴

第二步：消除横向滚动轴

      ul::-webkit-scrollbar {
        display:none
      }

这时横向滚动轴就消失了，并且可以横向滑动