H5 实现横向滚动的方法及需要注意的地方

现在的前端开发中，有许多页面上有设计了横向滚动，可以说横向滚动是一个很常见的场景，今天就来说说横向滚动怎么实现以及需要注意的问题。

实现横向滚动

要实现横向滚动，方式不止一种，这里我只说最简单的一种，其它太复杂的也没说的必要，其实只需要三个 CSS 属性就能搞定

/*横向滚动*/
.scroll-x{
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

给父容器加上上面的 CSS 就能实现横向滚动，是不是 so easy，而且现在都 2019 了，也不需要考虑 flex 的支持问题，（IE 已被自动忽略，，，）

文字怎么自动换行了

在用了上面的 CSS 后发现横向滚动的功能是有了，但文字怎么自己换行了，比如下面这样的

在检查及尝试了各种属性无果后，还是需要借助万能的 Google 来帮我解决问题，一通 Google 之后，发现只需要给父容器加一个属性就可以解决问题

white-space: nowrap;

加上这个之后就正常了，那么这是为什么呢，援引下原文章的解释，

对于white-space，item在没有用white-space:nowrap时，发现一个问题，在未设定宽度的情况下，一个单词不会换行，而汉字会换行，认为是和display:flex有关系，上网查阅，才知道：white-space是看空格来识别是否换行的，单词是作为一个字符，所以要针对于汉字和英文，都要设置white-space:nowrap不换行。因为汉字和英文的不同，导致所占的宽度不一致，所以要留1到2个像素。

去除滚动条

效果实现了，下面就是优化了，在实现了横向滚动功能后，大部分产品都会要求把滚动条给去掉，那么怎么去掉呢，也很简单

/*去除滚动条*/
::-webkit-scrollbar {
  display: none;
}

Demo

下面给出一个 Demo 的代码，就是做一个简单的横向滚动的导航条，如下图

代码如下：

<div class="scroll-x tabs">
      <div class="tab">
        <p>标签1</p>
        <div class="indicator"></div>
      </div>
      <div class="tab">
        <p>标签1</p>
        <div class="indicator"></div>
      </div>
      <div class="tab">
        <p>标签1</p>
        <div class="indicator"></div>
      </div>
      <div class="tab">
        <p>标签1</p>
        <div class="indicator"></div>
      </div>
      <div class="tab">
        <p>标签1</p>
        <div class="indicator"></div>
      </div>
      <div class="tab">
        <p>标签1</p>
        <div class="indicator"></div>
      </div>
    </div>

.tabs{
    height: 100px;
    line-height: 100px;
    padding: 0 10px;
    font-size: 50px;
    margin-bottom: 30px;
    .tab{
      padding: 0 20px;
    }
    .indicator{
      width: 20px;
      height: 4px;
      background: #1EAB42;
      margin: -4px auto 0 auto;
    }
  }