侧边栏壁纸
博主头像
黑山老妖博主等级

记录精彩的坎坷人生

  • 累计撰写 72 篇文章
  • 累计创建 85 个标签
  • 累计收到 9 条评论

目 录CONTENT

文章目录

移动端 左右滚动(无滚动条)导航栏

我是我村的希望
2024-03-03 / 0 评论 / 0 点赞 / 11 阅读 / 4176 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2024-03-03,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

方法一: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),则项目将占据固定空间。

案例:移动端的导航栏,可以左右滑动。

lmuwzolq.gif

<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-blockwhite-spaceoverflow-y

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

display: inline-block;

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

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

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

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

lqpeffnm.gif

<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结合使用了。

0
广告 广告

评论区