使用弹性盒子写移动端的横向和纵向滚动条效果

最新推荐文章于 2024-02-27 13:43:21 发布

前端小灰灰

最新推荐文章于 2024-02-27 13:43:21 发布

阅读量505

点赞数 2

文章标签： html html5 css

本文链接：https://blog.csdn.net/dongjianhui15/article/details/129464618

版权

我们在平时做开发的时候基本上都是纵向滚动条，今天在开发一个移动端页面遇到一个横向滚动条的效果突然感觉有点麻烦了。好好找了一下资料之后发现了比较简单的方法，今天分享给大家。

横向滚动条的html代码如下：

<body>
    <header></header>
    <main>
        <nav>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </nav>
        <ol>
        </ol>
    </main>
    <footer></footer>
</body>

css代码

*{
    margin: 0;
    padding: 0;
}
html{
    font-size: 13.333vw;
}
body,html{
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
}
header{
    width: 7.5rem;
    height: 2rem;
    background-color: aqua;
}
main{
    flex: 1;
    overflow-y: auto;
}
main nav{
    display: flex;
    overflow-x: auto;
    height: 2rem ;
   background-color: bisque;
}
main nav li{
    list-style: none;
    width: 1rem;
    flex: none;
    height: 2rem;
}
main ol{
    height: 12rem;
}
footer{
    width: 7.5rem;
    height: 2rem;
    background-color: brown;
}

实现的效果图如下：

纵向滚动条的代码如下：

html代码：

<body>
    <header></header>
    <main>
        <nav>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </nav>
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </main>
    <footer></footer>
</body>

css代码：

*{
   margin: 0;
   padding: 0;
}
html{
    font-size: 13.333vw;
}
html,body{
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
}
header{
    width: 7.5rem;
    height: 2rem;
    background-color: brown;
}
main{
    flex: 1;
    overflow-y: auto;
    display: flex;
}
main nav{
    overflow-y: auto;
    width: 2rem;
}
main li{
    height: 2rem;
}
main ol{
    width: 5rem;
    overflow-y: auto;
}
footer{
    width: 7.5rem;
    height: 2rem;
    background-color: aqua;
}

实现的效果图如下：