移动端左右滚动（无滚动条）导航栏

秒速五厘米 2023-03-04 09:14 28阅读 0赞

#### 方法一：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），则项目将占据固定空间。

案例：移动端的导航栏，可以左右滑动。  
![在这里插入图片描述][20200804173849349.gif]

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

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

display: inline-block;

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

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

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

案例：这个方法比上面flex好的地方是，宽度可以随便定。  
![在这里插入图片描述][20200804204858191.gif]

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

[20200804173849349.gif]: /images/20230208/ba49b166647a48de92c80e2e4c24d5bc.png
[20200804204858191.gif]: /images/20230208/a87ddc9b693a44768f2b31b60fb61bab.png