方法一：flex和overflow-y

下面这两条css属性，能够帮助我们实现 移动端导航栏，左右滚动，但有滚动条。

display: flex;
overflow-y: auto;  /*overflow-y: scroll/hiddle;也行*/

自定义滚动条的伪对象选择器，实现隐藏滚动条的效果。

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

另外还需要注意一点：flex布局在横向排列时，子元素的宽度会失效，这时，可以给子元素通过下面的属性固定宽度。

flex: 0 0 50px; /* 设置固定宽度 */

知识拓展：
1、flex---是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto ；
2、flex-basis---定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
   它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

案例：移动端的导航栏，可以左右滑动。

<style>
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        background: gold;
        display: flex;
        overflow-y: auto;
    }

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

    ul li {
        /* width: 50px;设置了也不生效 */
        height: 30px;
        background: tomato;
        margin: 10px;
        list-style: none;      
        flex: 0 0 50px; /* 设置固定宽度 */
    }
  
</style>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
</ul>

方法二：inline-block和white-space和overflow-y

先让子元素变成内联块，让子元素自动在父容器里面横行排列。

display: inline-block;

再给父容器设置下面两条css样式，让子元素不换行且可以横行滚动。

white-space: nowrap;
overflow-y: auto;

不想让滚动条出现的话，参考上面那种方法里面的隐藏滚动条的方法。

案例：这个方法比上面flex好的地方是，宽度可以随便定。

<style>
	*{margin: 0;padding: 0;}
	ul{
	    background: pink;
	    white-space: nowrap;
	    overflow-y: auto;
	    /* -webkit-overflow-scrolling: touch;添加手滑模式touch  */
	}
	ul li{
	    width: 50px;
	    height: 30px;
	    background: yellow;
	    margin:10px;
	    list-style: none;
	    display: inline-block;
	}
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
</ul>

总结：两种方法，但都与overflow-y结合使用了。