前言

你是不是还在为丑陋的滚动条样式而烦恼，那挥之不去的滚动条一直在那，当UI找你的时候，你是不是还在用那是浏览器默认的样式去搪塞他，现在教你三行代码解决它，话不多说，先上代码。

解决方案

方案一

&::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
    -webkit-overflow-scrolling: touch;
    -overflow-scrolling: touch;
}

通过这种方法经过测试可以使安卓机的滚动条消失,但是部分ios还是不行，身为一个专业的前端，这么的大问题怎么能够止步于此，继续寻找其它方案。

方案二

源码

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .wrapper {
        overflow: hidden;
      }
      .inner-wrapper {
        display: flex;
        width: 400px;
        overflow-x: auto;
        transform: translateY(10px);
        margin-top: -10px;
        padding-bottom: 10px;
      }
      .item {
        flex-shrink: 0;
        width: 200px;
        height: 300px;
        background: coral;
        font-size: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .item + .item {
        margin-left: 10px;
      }
    </style>

 <div class="wrapper">
  <div class="inner-wrapper">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</div>

亲测，方案二无任何兼容性问题。

代码分析

如果我们仔细看了上面的代码，应该也发现了那“三行”特殊的代码。没错，不要怀疑，就是你看到的那三行。

transform: translateY(10px);

margin-top: -10px;

padding-bottom: 10px;

当然还有一句，需要父容器wrapper overflow: hidden;

总结：给父元素设置固定高度，并且设置溢出隐藏，把滚动条挤出父元素的范围，从而达到隐藏滚动条的目的。这样就大功告成了。

三行代码消除丑陋的滚动条

前言

解决方案

方案一

方案二

源码

代码分析