类似于这样的结构
<div class="container">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</div>
container宽度是整个屏幕的宽度
box-1宽度是container的20%
box-2宽度是container的80%
box-3宽度是container的20%
开始的时候看不到box-3
拖动container来显示box-3
按楼上 @infinite 的答案,横向滚动条应该是出现在浏览器最低端,而不是div 上。
目前我能想到的答案只有一种,可以把这个div 作为一个单独页面,然后使用iframe嵌套进来。
如果其他人有更加好的答案,请分享,我觉得这个问题还是挺有趣的值得关注!
最终效果可以看看苹果官网用手机打开的顶部滑动菜单,以下是我写的一个演示DEMO
可以这样写:
HTML:
<div class="container-wrap">
<div class="container">
<div class="box-1">hello</div>
<div class="box-2">hello2</div>
<div class="box-3">hello3</div>
</div>
</div>
CSS:
.container-wrap {
width: 100%;
height: 50px;
background-color: rgba(0,0,0,0.8);
white-space: nowrap;
overflow: hidden;
overflow-x: scroll; /* 1 */
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-overflow-scrolling: touch; /* 2 */
text-align: justify; /* 3 */
&::-webkit-scrollbar {
display: none;
}
}
.container {
}
.container > div {
display: inline-block;
height: 50px;
color: #fff;
text-align: center;
line-height: 50px;
}
.box-1 {
width: 80%;
}
.box-2 {
width: 20%;
}
.box-3 {
width: 20%;
}
.container{
width: 120%;
overflow-x: auto;
}
.box1,.box3{
width: 20%;
}
.box2{
width: 80%;
}
这个应该可以满足你的需求,container的width必须有,不然overflow-x不会生效
现在的项目中有类似的需求,我是用两层div+ul来模拟的
<div width:100%>
<div overflow-x:scroll>
<ul width:50*3>
<li width:50>1</li>
<li width:50>1</li>
<li width:50>1</li>
</ul>
</div>
</div>