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