css 实现移动端横向滚动条隐藏但还可以滚动的效果

1、首先添加一段html代码：

<div class="scroll">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">X</div>
      <div class="item">XI</div>
</div>

在没有样式情况下这段代码显示效果如下：

 2、给 item 类添加样式：

 .item {
        width: 100px;
        height: 50px;
        background-color: aqua;
        border-right: 1px solid;
        white-space: nowrap;
        display: inline-block;
      }

运行结果：

 3、给 scroll 类 添加样式支持滚动

.scroll {
        text-align: center;
        white-space: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
      }

运行结果：

 4、去掉滚动条还可以滚动的实现

.scroll::-webkit-scrollbar {display:none}

参考来源：css实现横向滚动 - 掘金 (juejin.cn)