1、横条隐藏,可滚动
套父容器div,高度小于子div,以达到隐藏的效果
竖向隐藏同理:如果是移动端请使用下面这段代码
// webkit 内核的浏览器才可以使用!
#app::-webkit-scrollbar{
width:0px;
opacity:0;
-webkit-overflow-scrolling: touch;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* webkit 内核的浏览器才可以使用! */
/* .parent::-webkit-scrollbar {
display: none;
} */
/*最外层只需要高度小于子层的高度正好等于滚动条的高就可以了 */
.parent{
width: 200px;
height: 10px;
border: 1px solid #0000FF;
padding-bottom: 20px;
overflow: hidden;
}
/*设置窗口大小,出现横向滚动条 */
.content{
width: 200px;
height: 50px;
overflow-x:auto;/*主要*/
overflow-y:hidden;/*主要*/
}
/*设置内容展示宽高*/
.cont {
width: 400px;
height: 50px;
margin-top: -10px;
border: 1px solid #000000;
}
ul li {
width: 50px;
height: 20px;
display: inline-block;
vertical-align: middle;
margin-top: -10px;
}
</style>
</head>
<body>
<div class="parent" >
<div class="content">
<ul class="cont">
<li>
<p>怕</p>
</li>
<li>
<p>太怕</p>
</li>
<li>
<p>太可怕</p>
</li>
<li>
<p>不太可怕</p>
</li>
<li>
<p>真是太可怕了</p>
</li>
<li>
<p>哇,是太可怕了</p>
</li>
</ul>
</div>
</div>
</body>
</html>